0

我在练男人

我的索引.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>

我的菜单.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;
}

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

提前感谢您的解释。

4

3 回答 3

0

删除高度声明后，您需要添加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:autowhich 将导致ul元素随li标签扩展。

于 2013-04-13T06:12:55.733 回答
0

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

浮点数从正常的文档流中移除元素。
由于这个原因，在计算容器元素的高度时不考虑浮动元素的高度。

您可以通过在容器元素之后使用清除 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;
}
于 2013-04-13T06:19:24.937 回答
0

用这个代替height in #menu 

display:block;
overflow:hidden;

并从中删除填充li并提供它们height，line-height但是您需要并从或为a链接提供填充， 并且其工作正常leftright

于 2013-04-13T06:20:19.920 回答