0

试图摆脱导航项目下的一些奇怪的底部填充，这是由navigation .span样式引起的（这是使事情正常工作的一种，所以我无法摆脱它）。我希望导航项目与顶部和底部齐平。

我使用这种编码器的时间最长，我认为这要么是我第一次注意到填充物，要么是我刚刚在地毯下扫过它。

在这里摆弄 http://jsfiddle.net/arminvit/B2sAn/

快速查看下面的代码：

CSS

/* NAVIGATION */

.navigation {
width:100%;
clear:both;
float:left;
text-align:justify;
padding:0;
margin:0;
}

.navigation * {
display: inline;
margin:0;
padding:0;
}

.navigation ul {
list-style-type: none; 
margin:0;
padding:0;
}

.navigation li {
font-family:Arial;
font-size:12px;
color:white;
background:black;
padding:5px;
margin:0px;
white-space:nowrap;
}

.navigation span {
display: inline-block;
position: relative;
width: 100%;
height:0;
margin:0;
padding:0;
}

HTML

    <div class="navigation">

        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>

        <span></span>

    </div><!--END navigation-->
4

3 回答 3

1

我在您的Fiddle中添加了另一个导航栏，其中包含一些 CSS 类和标记，我认为它们可以提供您正在寻找的效果。（下面的CSS）

.test_nav{
   background:orange;   
}
.test_nav_bar{
   list-style-type: none;
}
.test_nav_bar li{
   display: inline-block;
   background: gray;
   margin-left:50px;
   padding: 5px;
}

显然你应该玩弄间距等。

希望有帮助！

于 2013-06-10T22:32:22.810 回答
0

不太确定您想要什么，但似乎是不同方法的混合或遗留物。因此，如果您想通过文本对齐来证明您的链接的合理性，请放弃所有关于浮动的内容。
http://jsfiddle.net/69LjY/
一些阅读：http ://www.barrelny.com/blog/text-align-justify-and-rwd/ 

/* NAVIGATION */

    .navigation {
    width:100%;
    text-align:justify;
    padding:0;
    margin:0;
    }

    .navigation ul {
    list-style-type: none; 
    margin:0;
    padding:0;
    line-height:0;
    }

    .navigation li {
    font-family:Arial;
    font-size:12px;
    color:white;
    background:black;
    padding:5px;
    margin:0px;
    display:inline-block;
    line-height:1.2em;
    }
.navigation ul:after {content:'';padding-right:2700px;}/* line-height 0 + this avoid gaps under , padding , use widest screen width you like*/
于 2013-06-10T22:29:17.227 回答
0

从display: inline-block;_.navigation span

于 2013-06-10T22:20:38.860 回答