html - div 的元素显示在所述 div 之外

Question

我有两个 div 封装在一个更大的 div 中。我认为这会使两个 div 显示在父级中，但由于某种原因，它们显示出来了。我已经尝试了我能想到的每一种不同的位置类型组合，我尝试了 display: inline。有谁知道我如何将这两个 div 放置在它们的父元素中？

这是我的 CSS 文件:

#Buttons {
  float: center;
  height: 100px;
  width: 900px;
  #Button1 {
    width: 20px;
  }
  #Button2 {
    width: 20px;
  }
}

application.html.erb

<div id="Buttons">
  <div id="Button1">
    <%= link_to "button1", "#", :class "btn btn-large" %>
  </div>
  <div id="Button2">
    <%= link_to "Button2", "#", :class "btn btn-large" %>
  </div>
</div>

更新:添加 inline: 显示到#Button1 和#Button2 使它们显示在#buttons 中:

#Buttons {
  float: center;
  height: 100px;
  width: 900px;
  #Button1 {
    width: 20px;
    display: inline;
  }
  #Button2 {
    width: 20px;
    display: inline;
  }
}

但我向#SearchBar 添加了完全相同的代码，它仍然显示在导航栏之外:

#SearchBar {
   height: 30px;
   width: 30px;
   display: inline;
   #p {margin: 0px;}
}

.navbar {
  height: 130px;
}

这是我整个标题的 html:

  <header class=navbar navbar-fixed-top navbar-inverse">
    <div id="Buttons">
      <div id="Button1">
        <a class="btn btn-large btn-primary" href="/subjects/1">1</a>
      </div>
      <div id="Button2">
        <a class="btn btn-large btn-primary" href="/subjects/2">2</a>
      </div>
    </div>
    <div id= "SearchBar">
      <form accept-charset="UTF-8" action="/things" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
        <p id="p">
          <input id="search" name="search" type="text" />
          <button class="btn" type="submit"><i class="thing-search">Go</i></button>
        </p>
</form>    </div>
  </header>

Answer 1

你的 CSS 有两个问题:

1. CSS 不允许嵌套规则。如果您正在使用像 Less 或 Sass 这样的 CSS 预处理器，那么您可以将 Less/Sass 源代码构建到纯 CSS 中，这将允许您在 Less/Sass 源代码中嵌套规则，但是如果您在最终 CSS 中嵌套了规则被提供给客户端然后它将失败。

2. 参见 Are CSS selectors case-sensitive? . “CSS 本身不区分大小写，但 HTML 中的选择器(class 和 id)区分大小写。”您的 id 属性未大写，但您的 CSS 选择器引用了大写的 id。

如果您解决了这些问题，您的代码就会正常工作。参见 http://jsfiddle.net/9mmnp6Lz/ .

HTML:

<div id="buttons">
  <div id="button1">
    b1
  </div>
  <div id="button2">
    b2
  </div>
</div>

CSS:

#buttons {
  float:center;
  height:100px;
  width:900px;
  border:1px solid red;
}
#button1 {
  width:20px;
  border:1px solid green;
}
#button2 {
  width:20px;
  border:1px solid blue;
}

编辑: 在我看来它是 <p>在您的 HTML 中；它有一个默认边距，插入整个 <p>内容向下，这样它就不会与位于其上方的 div 齐平。您应该可以通过设置 margin:0 来修复它在 <p> 上.参见 http://jsfiddle.net/9mmnp6Lz/2/ .