Question

我想将文本字段和按钮放在同一行。我用过display：inline;但它不起作用。我在哪里犯了错误？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

你不需要花车这样做，你的输入宽度为100％，这就是为什么显示内联不起作用，而且h2也是默认阻止所以你需要将它的显示设置为内嵌或内联块

＆＃13;

.listBar {
    position: absolute;
    left: 40px;
    top: 210px;
    box-sizing: border-box;
}

#input {
    font-size: 16px;
    border: none;
    background-color: aliceblue;
    padding: 14px;  
}

#add {
    color: black;
    border: none;
    background-color: lightgrey;
    padding: 14px 20px;
    font-size: 16px;
    cursor: pointer;
   
}

#add, #input {
    display: inline;
}

＆＃13;

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

＆＃13;

Answer 2

它是因为你的输入宽度为100％。这使得它占据了所有的位置，没有任何剩余的按钮。如果删除那里的宽度或将其设置为自动，它将起作用。另外，小心第二个浮子，一个应该是正确的，而不是留下。

.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;}

Answer 3

这里的问题是input需要width: 100%;其父级。所以没有更多的空间放置按钮了。

这是一个带注释的工作片段：
（这就是我如何纠正问题，如果是我自己的话）

＆＃13;

body { /* Added only for snippet */
  background: #ddd;
}

.listBar {
  position: absolute;
  background: #bbb; /* Added only for snippet */
  left: 40px;
  top: 20px; /* Modified only for snippet */
  box-sizing: border-box;
}

#input {
  width: auto; /* Modified, you could also simply remove this line */
  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; /* Floating on the right */
}

＆＃13;

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

＆＃13;

评论后的第二项提案：
（那不是我要做的，但这无论如何都很有趣！）

您可以使用transform属性来移动元素：

＆＃13;

body { 
  background-color: #ddd; /* Added only for snippet */
}

.listBar {
  position: absolute;
  background: #bbb; /* Added only for snippet */
  left: 40px;
  top: 20px; /* Modified only for snippet */
  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: right; /* Floating on the right */
  transform: translate(100%, -50%); /* Added with funny values, just for demo. Waiting for your answer to my comment. :) */
}

＆＃13;

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

＆＃13;

请注意，目前，由于padding的{{1}}，输入超出了其父级。
你可能想纠正它。

有关input的文档：https://www.w3schools.com/css/css3_2dtransforms.asp
使用transform百分比时，它占用元素大小的百分比它非常方便。

希望它有所帮助。

Answer 4

如果输入文本字段占用父宽度的100％是正确的，那么该按钮将没有空间。此外，不需要显示：内联。只需在两个元素类中添加 float：left 并增加主div类元素的宽度，就可以将文本字段和按钮放在同一行中。 / p>

here is snippet

Answer 5

在input和button周围放一个包装，然后使用display: flex;

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这有帮助吗？

.listBar {
  position: absolute;
  left: 40px;
  box-sizing: border-box;
}

.listBar__forms {
  display: flex;
}

#input {
  width: 100%;
  font-size: 16px;
  border: none;
  background-color: aliceblue;
  padding: 14px;
}

#add {
  color: whitesmoke;
  border: none;
  background-color: inherit;
  padding: 14px 20px;
  font-size: 16px;
  cursor: pointer;
}

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

文本字段和同一行中的按钮

5 个答案: