display: flex
时遇到了问题。输入的宽度缩短而不是像我预期的那样扩展。
这是我所做的结果,我的表单输入的宽度已经设置为 100%。我将其显示为:flex,因为我需要将下拉菜单、输入和搜索按钮粘在一起。无论如何,这是我的代码。如果有什么不正确的地方请告诉我。
HTML:
`<div class="search-button">
<div class="div-1-s1">
<span>All</span>
<img src="t-icon.svg" alt="a svg icon"/>
</div>
<div class="div-2-s1">
<form action="#">
<input type="text" id="label" placeholder="Search a
location">
</form>
<img src="f2-icon.svg" alt="a svg icon" id="sent-icon"/>
</div>
</div>`
CSS:
`.search-button {
display: flex;
justify-content: left;
margin-left: .4em;
margin-bottom: 1em;
}
.div-1-s1 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.25rem;
background-color: white;
border-radius: 5px 0 0 5px;
border: 1px solid white;
padding: .8em .7em .8em .75em;
margin-left: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.div-1-s1 img {
padding-left: 0.6rem;
}
.div-2-s1 {
display: flex;
}
.div-2-s1 input {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
padding: .8em 0 .8em .9em;
border: 1px solid white;
line-height: 1.25rem;
width: 100%;
max-width: 100%;
}
#sent-icon {
padding: .7em .5em .7em .5em;
margin-right: 1em;
border-radius: 0 5px 5px 0;
border: 1px solid white;
background-color: white;
}`
您只需将
width: 100%
添加到表格中
看这个:
body {
width: 100%;
}
.search-button {
display: flex;
justify-content: left;
margin-left: .4em;
margin-bottom: 1em;
width: 100%;
background: cyan;
}
.div-1-s1 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.25rem;
background-color: white;
border-radius: 5px 0 0 5px;
border: 1px solid white;
padding: .8em .7em .8em .75em;
margin-left: 1em;
display: flex;
justify-content: center;
align-items: center;
background: green;
}
.div-1-s1 img {
padding-left: 0.6rem;
}
.div-2-s1 {
display: flex;
width: 100%;
background: green;
}
form {
width: 100%;
}
.div-2-s1 input {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
padding: .8em 0 .8em .9em;
border: 1px solid white;
line-height: 1.25rem;
width: 100%;
background:red;
}
#sent-icon {
padding: .7em .5em .7em .5em;
margin-right: 1em;
border-radius: 0 5px 5px 0;
border: 1px solid white;
background-color: white;
}
<div class="search-button">
<div class="div-1-s1">
<span>All</span>
</div>
<div class="div-2-s1">
<form action="#">
<input type="text" id="label" placeholder="Search a location">
</form>
</div>
</div>