0

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

在此处输入图像描述

我的代码是这个 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);
}
4

4 回答 4

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/

于 2013-04-14T12:57:33.287 回答
0

检查这个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; }
于 2013-04-14T12:36:27.537 回答
0

将所有<li>标签放在一<div> 组css中<div id="customDiv">

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

这将使左边距和右边距相等，额外的空间在两边平均分配..

于 2013-04-14T12:48:09.693 回答
0

你有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 也不支持。

于 2013-04-14T13:17:42.737 回答