嘿，我来帮你看看为啥display: inline没生效～你的代码里有两个关键问题导致输入框和按钮没法同行：

• 输入框宽度占满了容器：你给#input设置了width: 100%，这会让它直接撑满父容器.listBar的所有宽度，按钮根本没地方摆放，自然被挤到下一行了。
• float属性覆盖了display设置：你同时给#input和#add加了float: left，float会让元素脱离标准文档流，这时候display: inline的规则会被完全忽略，起不到任何作用。

下面给你两种可行的解决方案，按需选择：

方案一：用Flex布局（推荐，现代布局首选） #

Flex布局能轻松实现元素的同行排列，还能自动分配空间，代码调整如下：

.listBar { 
  position: absolute; 
  left: 40px; 
  top: 210px; 
  box-sizing: border-box;
  display: flex; /* 给父容器添加flex布局 */
}
#input { 
  flex: 1; /* 让输入框自动占满剩余空间 */
  font-size: 16px; 
  border: none; 
  background-color: aliceblue; 
  padding: 14px;
  float: none; /* 去掉float属性 */
}
#add { 
  color: whitesmoke; 
  border: none; 
  background-color: inherit; 
  padding: 14px 20px; 
  font-size: 16px; 
  cursor: pointer;
  float: none; /* 去掉float属性 */
}
/* 删掉#add, #input { display: inline; } 这行已经没用了 */

方案二：用inline-block（兼容旧环境可选） #

如果不想用Flex，也可以通过调整宽度+inline-block来实现，注意要给父容器设置明确宽度：

.listBar { 
  position: absolute; 
  left: 40px; 
  top: 210px; 
  box-sizing: border-box;
  width: 500px; /* 给父容器设置固定宽度，作为子元素百分比宽度的参照 */
  font-size: 0; /* 解决inline-block元素间的空白间隙 */
}
#input { 
  width: 80%; /* 留出按钮的空间，不要设100% */
  font-size: 16px; 
  border: none; 
  background-color: aliceblue; 
  padding: 14px;
  display: inline-block; /* 用inline-block代替inline，支持设置宽高 */
  float: none; /* 去掉float属性 */
}
#add { 
  color: whitesmoke; 
  border: none; 
  background-color: inherit; 
  padding: 14px 20px; 
  font-size: 16px; 
  cursor: pointer;
  display: inline-block;
  float: none; /* 去掉float属性 */
}

简单解释下：Flex布局是目前前端布局的主流方案，写法简洁且适配性强；如果用inline-block，要注意父容器的宽度设置，以及元素间可能出现的空白间隙（上面代码用font-size:0解决了这个问题）。

内容的提问来源于stack exchange，提问作者jaizi jutt