列表项之间的不需要的边距或填充

时间:2012-11-22 02:22:32

标签: html css html5 css3

我的CSS中有一个小设计问题,我想知道是否有人可以为我查看。设计问题在于水平导航的翻转效果。似乎有某种额外的边距或填充,但我在css中找不到问题。我将粘贴我正在使用的代码,以便您自己查看。在翻转导航列表项之前,您将无法看到问题。

HTML:

    <div class="Horiznav">
  <ul>
    <li id="active"><a href="#">Link #1</a></li>
    <li><a href="#">Link #2</a></li>
    <li><a href="#">Link #3</a></li>
    <li><a href="#">Link #4</a></li>
    <li><a href="#">Link #5</a></li>
  </ul>
</div>

CSS:

.Horiznav {
  background: #1F00CA;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}
.Horiznav ul {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  text-Align: center;
  margin: 0;
  padding-top: 5px; padding-bottom: 5px;
}
.Horiznav ul li {
  display: inline;
}
.Horiznav ul li a {
  padding-top: 5px;
  padding-bottom: 5px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #fff;
}
.Horiznav ul li a:hover {
  background: #16008D;
  color: #fff;
}
#active a { border-left: 1px solid #fff; }

2 个答案:

答案 0 :(得分:5)

由于您有li个元素display:inline,因此问题(每个菜单/列表项左侧的额外间隙)是HTML标记中的空白区域的结果。你可以:

A - 摆脱HTML中的空格:

<ul><li id="active"><a href="#">Link #1</a></li><li><a href="#">Link #2</a></li><li><a href="#">Link #3</a></li><li><a href="#">Link #4</a></li><li><a href="#">Link #5</a></li></ul>

B - 或者,使用font-size:0技巧:

font-size:0容器上设置ul,并在font-size:whatever子元素上使用li覆盖此内容:

.Horiznav ul {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  text-Align: center;
  margin: 0;
  padding-top: 5px; padding-bottom: 5px;
  font-size: 0;       /* #1 */
}
.Horiznav ul li {
  display: inline;
  font-size: 16px;    /* #2 */
}

http://jsfiddle.net/EZSvC/4/

C - 或者,使用浮动布局:

浮动li元素(然后隐式显示为块)并使用ul清除overflow:hidden容器上的浮点数。但是,如果您希望它居中,则需要给出容器宽度并应用margin:0 auto

http://jsfiddle.net/EZSvC/5/

答案 1 :(得分:0)

在你的css中添加“Horiznav ul li a”中的“display:inline-block”

.Horiznav ul li a {
  padding-top: 5px;
  padding-bottom: 5px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #fff;
  display:inline-block;
}

这是jsFiddle file

希望这能解决您的问题。