html - 文本字段和按钮在同一行

Question

我想把文本框和按钮放在同一行。我使用了显示:内联；但它不工作。我哪里出错了？

.listBar {
  position: absolute;
  left: 40px;
  top: 210px;
  box-sizing: border-box;
}

#input {
  width: 100%;
  font-size: 16px;
  border: none;
  background-color: aliceblue;
  padding: 14px;
  float: left;
}

#add {
  color: whitesmoke;
  border: none;
  background-color: inherit;
  padding: 14px 20px;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

#add,
#input {
  display: inline;
}

<div class='listBar'>
  <h2 class='header' style='margin:5px'> List </h2>
  <input type='text' id='input' placeholder="Title">
  <button id='add'> Add </button>
</div>

Answer 1

这是因为您在输入中设置了 width: 100%。它使它占据了所有位置，并且没有留下任何按钮。如果您删除那里的宽度或将其设置为自动，它将起作用。另外，请注意第二个 float ，它应该在右边，而不是左边。

.listBar{
position: absolute;
left: 40px;
top: 210px;
box-sizing: border-box;}

#input{
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
float: left;}

#add{
color: whitesmoke;
border: none;
background-color: inherit;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
float: right;}

#add, #input{
display: inline;}