div 的元素显示在 div 之外答案

【问题标题】：Elements of a div display outside of said divdiv 的元素显示在 div 之外
【发布时间】：2014-12-07 05:33:02
【问题描述】：

我有两个 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: display 到 #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>

【问题讨论】：

只是为了检查：您的 CSS 是非标准的。你在用LESS吗？
我在上面给了我的红宝石。不，我没有使用 LESS。
@user2570380 其实我只需要添加 display: inline。但是，我在搜索栏中添加了相同的代码，但它仍然显示在其父级之外。

标签： html css user-interface frontend

【解决方案1】：

您的 CSS 存在 2 个问题：

CSS 不允许嵌套规则。如果您使用的是 CSS 预处理器，例如 Less 或 Sass，那么您可以将 Less/Sass 源代码构建成纯 CSS，这将允许您在 Less/Sass 源代码中嵌套规则，但如果您在最终 CSS 中有嵌套规则提供给客户端，然后它将失败。
见Are CSS selectors case-sensitive?。 “CSS 本身不区分大小写，但来自 HTML（类和 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;
}

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

【讨论】：

糟糕，大小写差异是一个错字；我修好了它。并且#Button1 和#Button2 即使在嵌套时也可以工作，但#Searchbar 即使在单独编写时也不起作用。我在上面发布了我的新 CSS。
我需要查看您的 HTML 以了解为什么它没有按您的预期工作。我可以在一个 div 中创建一个 div，应用您的 CSS，并按预期查看包含：jsfiddle.net/9mmnp6Lz/1。
我更改了上面的代码，将
边距设置为 0，但没有任何改变。
查看您的编辑，您已将#p 规则嵌套在#SearchBar 规则中。这是我在回答中提到的问题#1；你不能在 CSS 中嵌套规则。您必须将 #p 规则放在任何其他规则之外。如果您希望选择器更具体，即仅在 #p 作为 #SearchBar 的后代出现时选择它，请用空格分隔它们，或使用 > 运算符来表示父子关系。（尽管由于文档中的 id 必须是唯一的，所以 #id 样式选择器的这种特殊性并不是很有用。）请参阅 jsfiddle.net/9mmnp6Lz/2。
我将 #p 设置为自己的规则，但没有任何改变。

【解决方案2】：

如果你在 CSS 中，这不适用于 Child of Your syntax is for LESS
LESS 必须导出到 CSS
并且您的 CSS 选择器以大写字符开头...
还有一个 Float : Center 未定义，你可以看到这个 CSS 源
W3SCHOOLS/CSS FOR FLOAT

这里的代码：

buttons{
  background: black;
  height: 100px;
  width: 900px;
}
#button1 {
background : red;
width: 20px;
}
#button2 {
background : yellow;
width:20px;
}

在 JSFiddle 上查看此示例 http://jsfiddle.net/toxmgtup/

【讨论】：