Question

我已经遇到这个问题了一段时间，每当我调整导航栏的大小时，如果大小ddint匹配，它会在底部添加1行。在联系我标签后，有人可以帮我删除那个小空间吗？提前致谢。这是结果的链接

enter image description here

我的代码就是这个 obj.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css" href="obj1.css">
<title>Objective 1</title>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li class="navbutton"><a href="">About Us</a></li>
<li class="navbutton"><a href="">Our Team</a></li>
<li class="navbutton"><a href="">Education</a></li>
<li class="navbutton"><a href="">Health Care</a></li>
<li class="navbutton"><a href="">Advertising</a></li>
<li class="navbutton"><a href="">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>

obj1.css

body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

ul {
    display: inline-block;
    list-style-type:none;
    margin:0;
    padding:0;
}

li {
    float: left;
}

.header{
width: 900px;
height: 385px;
background-image: url(header.jpg);
}
.navbutton {
position: relative;
top: 310px;
width: 145px;
height: 75px;
margin-left: 0px;
margin-right: 5px;
background-image: url(link.png);
}

.navbutton a {
text-decoration:none;
}

.navbutton:hover{
background-image: url(linkselected.png);
}

Answer 1

您可以通过添加以下规则来解决此问题：

//Change the header width to 901px to fit all the tabs
.header{
width: 901px;
height: 385px;
background-color: #ccc;
}

//Change the navbutton to be 146px wide
.navbutton {
position: relative;
top: 310px;
width: 146px;
height: 75px;
margin-left: 0px;
margin-right: 5px;
background-color: white;
}

//Remove the margin on the last child
.navbutton:last-child {
    margin-right:0;
}

以下是jsFiddle，以防您需要它 - http://jsfiddle.net/XXczL/

Answer 2

检查此jsfiddle以获取流畅的布局解决方案。

此解决方案使用display: table，display: table-row和display: table-cell属性值。

标记

 <div class="header">
     <div class="nav">
        <ul>
           <li class="navbutton">
              <a href="">About Us</a>
           </li>
           <li class="navbutton">
              <a href="">Our Team</a>
           </li>
           <li class="navbutton">
              <a href="">Education</a>
           </li>
           <li class="navbutton">
              <a href="">Health Care</a>
           </li>
           <li class="navbutton">
              <a href="">Advertising</a>
           </li>
           <li class="navbutton">
              <a href="">Contact Us</a>
           </li>
        </ul>
     </div>
  </div>

CSS

     body{
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
     }

     .nav ul{
        display: table-row;
        list-style-type: none;
        margin: 0;
        padding: 0;
     }

     .header{
        width: 900px;
        height: 385px;
        background: #f00 url(header.jpg);
        overflow: hidden;
        border: 1px solid #000
     }

     .nav{
        display: table;
        width: 100%;
        margin-top: 310px;
     }

     .navbutton{
        display: table-cell;
        height: 75px;
        background-image: url(link.png);
        padding: 0 4px;
     }

     .navbutton a{
        background: none repeat scroll 0 0 #FFFFCC;
        color: #FF0000;
        display: block;
        height: 100%;
        line-height: 75px;
        text-decoration: none;
        text-align: center;
     }

     .navbutton:hover{
        background-image: url(linkselected.png);
     }

     li:last-child, li.the_last_child{ padding-right: 0; }
     li:first-child, li.the_first_child{ padding-left: 0; }

Answer 3

将所有<li>代码放入<div> 为<div id="customDiv">

设置css

#customDiv { margin-left:auto; margin-right:auto; }

这将使左右边距相等，额外空间在两侧均匀分布..

Answer 4

这里有2个问题。首先，您可以在不需要它们的地方应用边距。即使你纠正了这个问题，你的标题宽度仍会导致出现不受欢迎的“空格”

http://tinker.io/0191d/2

包括以下修改：

.header {
    width: 895px; /* or modify the width of the button elements */
}

ul {
    margin: 0 0 0 -5px;
}

.navbutton {
    margin-left: 5px;
    margin-right: 0;
}

您可以使用:last-child选择器删除最后一个元素的边距，但在实际需要元素换行的实例中它不能很好地工作（请参阅：http://codepen.io/cimmanon/pen/dwbHi）。此外，IE8不支持它。

UL / LI定位间距

4 个答案:

标记

CSS