2

ul auto indents について多くの質問があったことは知っていますが、それらの回答の多くを試してみましたが成功しませんでした。また、パディング付きのコンテナを追加するときに、片側だけがパディングされているように見えるという追加の問題があります。

基本的に、ウィンドウの下部にULバーを固定しようとしています。このバーはコンテナ (メイン) の内側にあり、ウィンドウの両側からパディングされます)。ウィンドウの幅 (液状) に合わせて自動拡張するように設計されているため、初期幅 = デバイス幅を超える定義された幅はありません。

単独で記述すると、ul の左側に小さな自動インデントが表示されます。ul 要素と li 要素に 0 のパディングとマージンを追加しようとしましたが、他の要素と同様に効果がないようです。コンテナに追加すると、インデントの問題がある側だけがパディングされているようです。単純でばかげたものだと確信していますが、助けていただければ幸いです。

余談ですが、li 要素の幅が 33.3% になっているのは、stackoverflow にあるスペーシング ボックス ハックを使用したためです。それを使用しても、この問題では何も変わらない/助けない/傷つけることはないので、もう少し簡単にするために省略しました。

JSFiddle リンクhttp://jsfiddle.net/XdHXf/1/

HTML

<div class="main">
    <nav>
            <ul>
                <li><a href="#">Main</a></li>
                <li><a href="#">Second</a></li>
                <li><a href="#">Third</a></li>
            </ul>
    </nav>
</div>

CSS

.main{
    width: 100%;
    padding: 0 1em;
}
nav{
    position: fixed;
    bottom: 0px;
    background: #455868;
    width: 100%;
    z-index: 1000;
}
nav ul {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}
nav li{
    position: relative;
    float: left;
    width: 33.3%;
    text-align: center;
    background: #455868;
    padding: 0;
    margin: 0;
}
nav li a{
    text-decoration: none;
    display: inline-block;
    width: 100%;
    padding: 15px 0;
}
4

1 に答える 1

2

これは、ブラウザの組み込みスタイルシートから取得されます。追加すると

body {
    margin: 0;
}

小さな余分なスペースがなくなります。

別の方法として、 でチェックすると、同様の結果が得られNormalized CSSますFiddle Options。

于 2013-05-06T21:55:07.400 に答える