Question

我有两个div包含在一个更大的div中。我认为这会使两个div显示在父级内，但由于某种原因，它们会显示出来。我尝试了各种不同的位置类型组合，并尝试显示：内联。有谁知道如何将两个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>

更新：添加内联：显示到＃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有两个问题：

CSS不允许嵌套规则。如果您正在使用像Less或Sass这样的CSS预处理器，那么您可以将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齐平。您应该可以通过在margin:0上设置<p>来解决此问题。请参阅http://jsfiddle.net/9mmnp6Lz/2/。

Answer 2

如果您使用CSS，那么您的语法不适用于您的语法是 LESS
LESS必须导出到CSS
，你的Selector for CSS以Upper Char开始...
还有一个 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/

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

2 个答案: