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>

我正在尝试复制Google主页（某种），我试图实现的是搜索栏（输入类型等于搜索）将在两个按钮上方一行，我可以实现可以通过其他方式确定，但要检查inline-block属性。对象应该像其“ inline”一样工作，仅捕获内容的宽度，也捕获“ block”，但是由于某种原因，“ 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%;
  }

为什么“内联阻止”属性在此页面上不起作用？

2 个答案: