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

默认情况下，元素使用＆＃39;块＆＃39;显示方法。您可以使用内联或内联块的显示在同一行上显示div。

如果您想根据需要快速执行布局，可能有助于查看引导程序。

http://getbootstrap.com/css/

Answer 2

有些东西可以帮助你编写更好的和有价值的代码：

您需要将html移动到正文标记
您需要将标题放入head标签（标签名称）
您需要在css样式中添加样式：type="text/css"
#定义了一个ID，并且ID应该始终是唯一的，您应该使用可以由.在css文件中选择的类（但是我现在可以使用ID来更轻松地执行此操作跟踪代码的差异; - ））

`

<html>
    <head>
       <title>Invat</title>
       <style type="text/css">
         CSS goes here
       </style>
    </head>
    <body>
      <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>
    </body>
</html>

现在我们可以看看你的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 #cap2,  #cap #capcadru #cap3, #cap #capcadru #cap3 {text-align:right;}

默认情况下，浏览器会定义display: block以将多个项目对齐，您需要将显示类型更改为：display: inline-block并添加到项目float: left 所以在你的情况下会是这样的：

#cap #capcadru #cap2, #cap #capcadru #cap3 { display: inline-block; float: left; }

然而，这是一个js小提琴，有一个清晰的html和css：JSFiddle

此致

Answer 3

IE8及以上版本支持此解决方案！

如果您正在学习，那么请谷歌搜索CSS tables（不是HTML表格）

working fiddle

删除margin left / tight

关注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 */
}

Answer 4

您必须像这样修改CSS的两个块。

#cap > #capcadru > #cap3 > #cap3s {
    width: 396px;
    border: 1px solid red; 
    height:50px; 
    overflow:hidden;
    float: left;
}

#cap > #capcadru > #cap3 > #cap3d {
    width: 396px;
    border: 1px solid red; 
    height: 50px;
    float: left;
}

FIDDLE： http://jsfiddle.net/u0zpvjx9/

CSS布局菜单定位？

4 个答案: