.brand-container3 {
background-image: url("media/wysiwyg/576_1.JPG");
background-size: cover;
position: relative;
height: 200px;
}
.search-container {
text-align: center;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
}
.searchTerm {
border: 3px solid #556B2F;
border-right: none;
padding: 5px;
height: 60px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAC;
font-size: 30px;
cursor: pointer;
}
.searchTerm:focus{
color: #12291F;
}
.centersearchButton {
width: 70px;
height: 60px;
border: 1px solid #556B2F;
background: #556B2F;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 35px;
}
.centersearchButton:hover {
background: #6B8E23;
border: 1px solid #6B8E23;
}
.centersearchButton:active {
background: #6B8E23;
border: 1px solid #6B8E23;
box-shadow: inset 0 0 5px #000000;
}
.centersearchButton:focus, .loader:focus {
outline: 0;
}
/*Resize the wrap to see the search bar change!*/
.wrap{
position: relative;
top: 50%;
left: 50%;
}
.loader {
border: 10px solid #FFFFFF;
border-top: 10px solid #ffb677; /* #3498db */
border-radius: 50%;
width: 25px;
height: 25px;
animation: spin 0.5s linear infinite;
margin: 0 auto;
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
input {
font-family: 'Open Sans', sans-serif;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="brand-container3">
<form id="search_mini_form" action="https://www.cannockgates.co.uk/catalogsearch/result/" method="get" class="wrap" onsubmit="return validateCenterSearch()">
<div class="search-container">
<input type="search" class="searchTerm" placeholder="Search Products..." id="centersearch" name="q" maxlength="128" value="" autocomplete="off" spellcheck="true" title="Search by Keyword or Product Code">
<button type="submit" class="centersearchButton" title="Search"><i class="fa fa-search fa-fw"></i><div class="loader"></div>
</button>
</div>
</form>
</div>
亲爱的stackoverflow,
我正在尝试使搜索栏填满屏幕宽度。搜索栏当前位于背景图像div容器的顶部,我希望搜索栏位于父div容器的中心。
我尝试过宽度:100%;弄乱了填充和边距。仍然无法获得我想要的结果。
也许这是一个简单的解决方法,但是atm。搜索栏的大小是固定的。
非常感谢
新手CSS人员
请参阅更新的代码。输入宽度。
.brand-container3 {
background-image: url("media/wysiwyg/576_1.JPG");
background-size: cover;
position: relative;
height: 200px;
}
.search-container {
text-align: center;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
}
.search-container input[type="search"] {
width: calc(100vw - 80px);
}
.searchTerm {
border: 3px solid #556B2F;
border-right: none;
padding: 5px;
height: 60px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAC;
font-size: 30px;
cursor: pointer;
}
.searchTerm:focus{
color: #12291F;
}
.centersearchButton {
width: 70px;
height: 60px;
border: 1px solid #556B2F;
background: #556B2F;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 35px;
}
.centersearchButton:hover {
background: #6B8E23;
border: 1px solid #6B8E23;
}
.centersearchButton:active {
background: #6B8E23;
border: 1px solid #6B8E23;
box-shadow: inset 0 0 5px #000000;
}
.centersearchButton:focus, .loader:focus {
outline: 0;
}
/*Resize the wrap to see the search bar change!*/
.wrap{
position: relative;
top: 50%;
left: 50%;
}
.loader {
border: 10px solid #FFFFFF;
border-top: 10px solid #ffb677; /* #3498db */
border-radius: 50%;
width: 25px;
height: 25px;
animation: spin 0.5s linear infinite;
margin: 0 auto;
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
input {
font-family: 'Open Sans', sans-serif;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="brand-container3">
<form id="search_mini_form" action="https://www.cannockgates.co.uk/catalogsearch/result/" method="get" class="wrap" onsubmit="return validateCenterSearch()">
<div class="search-container">
<input type="search" class="searchTerm" placeholder="Search Products..." id="centersearch" name="q" maxlength="128" value="" autocomplete="off" spellcheck="true" title="Search by Keyword or Product Code">
<button type="submit" class="centersearchButton" title="Search"><i class="fa fa-search fa-fw"></i><div class="loader"></div>
</button>
</div>
</form>
</div>
您应该添加宽度:100%;对于下等。因为flex和输入总是获得自动宽度
CSS
.searchTerm {
border: 3px solid #556B2F;
border-right: none;
padding: 5px;
height: 60px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAC;
font-size: 30px;
cursor: pointer;
width:100%;
}
.search-container {
text-align: center;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
width:100%;
}