Question

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

我一直在使用这段编码器的时间最长，我认为这是我第一次注意到填充物，或者我刚刚将它扫到地毯下面。

快速查看以下代码：

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-->

Answer 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;
}

显然你应该玩间距等。

希望有所帮助！

Answer 2

从display: inline-block;

中删除.navigation span

Answer 3

不太确定你想要什么，但似乎是混合或遗留的不同方法。因此，如果您希望文本对齐证明您的链接，请放弃所有关于浮动的内容 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*/

CSS水平列表/导航与不需要的底部填充

3 个答案: