html - CSS布局菜单定位？

Question

大家好，我是 CSS 的新手，我不太明白为什么我的菜单会这样显示，而不是在同一行。有人可以解释一下为什么它不显示在同一行上吗？这是代码

CSS

#cap { 
text-color:black;
font-size: 20px;
height:100px;    
}

#cap > #capcadru {
width:800px;
margin: 0px auto;
}

#cap > #capcadru > #cap2 {
  height:50px;
  text-align:center;
  border: 1px solid grey
}
#cap > #capcadru > #cap3{
 margin: 0px auto;
}
#cap > #capcadru > #cap3 > #cap3s {
  margin-right:400px;
  border: 1px solid red; 
  height:50px; 
  overflow:hidden;
}
#cap > #capcadru > #cap3 > #cap3s > div {
   text-align:center;
}
#cap > #capcadru > #cap3 > #cap3d {
   margin-left:400px; 
   border: 1px solid red; 
   height: 50px;}
#cap > #capcadru > #cap3 > #cap3d > div {
   text-align:right;
}

HTML

<div id="cap">
  <div id="capcadru">
    <div id="cap2">Test</div>
    <div id="cap3">
      <div id="cap3s"><div>s</div></div>
      <div id="cap3d"><div>s</div></div>
    </div>
  </div>
</div>

Answer 1

本方案支持IE8及以上版本!

如果你正在学习，那么，谷歌搜索 CSS 表格(不是 HTML 表格)

working fiddle

• 移除留余量/紧缩

关注的 CSS :

#cap > #capcadru > #cap3 {
    margin: 0px auto;
    width:100%; /* added */
    display:table /* added */
}
#cap > #capcadru > #cap3 > #cap3s {
    border: 1px solid red;
    height:50px;
    overflow:hidden;
    width:50%; /* added */
    display:table-cell /* added */
}
#cap > #capcadru > #cap3 > #cap3s > div {
    text-align:center;
}
#cap > #capcadru > #cap3 > #cap3d {
    border: 1px solid red;
    height: 50px;
    width:50%; /* added */
    display:table-cell /* added */
}