为什么“inline-block”属性在此页面上不起作用？

Question

#searchBar {
  display: inline-block;
}

#container {
  width: 580px;
  background-color: white;
}

#logo {
  margin-left: 25%;
}

<div id="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" id="logo" height="40px">
  <form>
    <input type="text" id="searchBar">
    <input type="submit" value="Search Google">
    <input type="submit" value="Feeling Lucky">
  </form>
</div>

我正在尝试复制谷歌主页（有点），我想要实现的是搜索栏（输入类型等于搜索）将是两个按钮上方的一行，我可以实现通过其他方式肯定但想检查 inline-block 属性..对象应该像它的“内联”一样，只捕获内容的宽度和“块”，但由于某种原因，“块”不起作用并且按钮就在搜索栏的右侧..

Answer 1

与display: block相比，主要区别在于display: inline-block在元素后不添加换行符，因此该元素可以与其他元素相邻。

所以你必须使用display: block 来适应宽度。

Answer 2

display : block 将达到目的。因为 {display: inline-block} 不会添加换行符。因此，您必须将 CSS 修改为：

#searchBar {
display: block;
  }


#container {
width: 580px;
background-color: white;
  }

#logo {
margin-left: 25%;
  }