css - 不要な下部パディングを含む CSS 水平リスト/ナビゲーション

Question

スタイルが原因であるナビゲーション項目の下の奇妙な下部パディングを取り除こうとしています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-->

Answer 1

あなたが何を望んでいるのかよくわかりませんが、さまざまな方法の混合または残り物のようです。したがって、テキストを揃えてリンクを正当化したい場合は、フローティングについてはすべてやめてください。
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*/

Answer 2

display: inline-block;から削除.navigation span