我想用html和css做一个简单的搜索栏。然而,justify-content和align-items都不工作。谁能帮我找出原因?
https:/codepen.ioLavender786penyLYwRBP。
input[type=text] {
width: 400px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.container {
align-items: center;
justify-content: center;
}
<div id = "container">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
在你的代码中,表单占据了100%的宽度,这就是为什么你不能将搜索栏居中的原因。
如果你想让表单居中,你应该给表单设置一个宽度(让搜索栏占100%),或者像下面的例子一样,让表单保持100%的宽度,并把它的元素居中(我把下面的例子换成了 .container
与 form
并补充说 display:flex;
)
input[type=text] {
width: 400px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
form {
display:flex;
justify-content: center;
}
<div id="container">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
你已经在容器上添加了CSS,但它已经覆盖了表单标签,所以在表单上应用CSS,而不是容器。