Question

我正在练习这些人

myIndex.html：

<html>
<head>
<link rel="stylesheet" type="text/css" href="myMenu.css"> 
</head>
<body>
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">5 columns</a></li>
<li><a href="">4 columns</a></li>
<li><a href="">3 columns</a></li>
<li><a href="">1 column</a></li>
</ul>
</body>
</html>

myMenu.css

#menu {
    list-style:none;
    width:940px;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

    border: 1px solid #002232;
}
#menu li {
    float: left;
    display: block;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
}
#menu li a {
    display: block;
    text-decoration:none;
}

如果高度：43px从#menu中移除，则它没有包装容器形状（即带有圆角4个边角的边框），而顶部的一个单边框是可见的。我不确定为什么这样做？ Ul已经知道其中的元素，例如li和非零高度的元素，那为什么它无法包裹它们呢？

提前感谢您的解释。

Answer 1

删除身份声明后，您需要将display:inline-block添加到#menu {...} css。

#menu {
  list-style:none;
  width:940px;
  margin:30px auto 0px auto;
  padding:0px 20px 0px 20px;   
  display:inline-block;     /* add this line */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #014464;
  background: -moz-linear-gradient(top, #0272a7, #013953);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
  border: 1px solid #002232;
}

这是一个显示结果的jsbin：http://jsbin.com/iwomuw/1/edit。

如果您不想使用display:inline-block。另一种方法是使用overflow:auto，这会导致ul元素与li标记一起展开。

Answer 2

工作小提琴： http://jsfiddle.net/UsheC/

Floats从正常文档流中删除元素。
因此，在计算容器元件的高度时，不考虑浮动元件的高度。

您可以通过在容器元素之后使用清除div来克服此行为。

<ul id="menu" class="clearFix">
    <li><a href="">Home</a></li>
    <li><a href="">5 columns</a></li>
    <li><a href="">4 columns</a></li>
    <li><a href="">3 columns</a></li>
    <li><a href="">1 column</a></li>
</ul>

/ \

.clearFix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Answer 3

使用此代替height in #menu

display:block;
overflow:hidden;

并从li移除填充，并为其提供height和line-height但是您需要和为a或left的{{1}}链接提供填充并且工作正常

除了提到高度外，CSS UL没有所有边框

3 个答案: