<a> div内のアンカー要素のリストを浮動させる

Question

私は、ナビゲーションがページの一番上にある、単純でブロックの多い形式で、最初から順不同のリストとして作業しようとしていました<a>要素でいっぱいになり、すべてがリストタグに入れられます。<nav>タグ内にも含まれます。私がやりたいことは順不同リストは下から10pxの程度、ナビゲーション領域（青）の下部に常にその要素を有する場合、それを持っている、としてマージンを使用している

* { 
 
    margin: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.bdy { 
 
    display: block; 
 
    margin: 0; 
 
    background-color: #d2d2d2; 
 
    height: 85%; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
nav.navbar { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 15%; 
 
    width: 100%; 
 
} 
 
nav ul { 
 
    float: left; 
 
    list-style-type: none; 
 
    height: 100%; 
 
    text-align: center; 
 
    background-color: #326ada; 
 
    width: 97.9%; 
 
} 
 
nav.navbar li { 
 
    display: inline-block; 
 
    float: left; 
 
    bottom: 0; 
 
    margin-left: 1%; 
 
    margin-top: 10%; 
 
} 
 
nav li a { 
 
    text-decoration: none; 
 
    color: white; 
 
}

<nav class="navbar"> 
 
    <ul> 
 
    <li><a href="#" class="first">Home</a></li> 
 
    <li><a href="#">Assignments</a></li> 
 
    <li><a href="#">Blog</a></li> 
 
    </ul> 
 
</nav> 
 
<div class="bdy"> 
 
    <p>content</p> 
 
</div>

パーセンテージはうまくいかないようです。

私は、乱れのない順序で、リストをフロートできる方法はありますか？あなたは何ができるか

Answer 1

が%マージンの使用を避け、代わりに、リストの一番下に各a整列内のテキストを作成している、これを試してみてください。

* { 
 
    margin: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.bdy { 
 
    display: block; 
 
    margin: 0; 
 
    background-color: #d2d2d2; 
 
    height: 85%; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
nav.navbar { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 15%; 
 
    background-color: red; 
 
    width: 100%; 
 
} 
 
nav ul { 
 
    float: left; 
 
    list-style-type: none; 
 
    height: 100%; 
 
    text-align: center; 
 
    background-color: #326ada; 
 
    width: 97.9%; 
 
} 
 
nav.navbar li { 
 
    float: left; 
 
    height:100%; 
 
    bottom: 0; 
 
    margin-left: 20px; 
 
    box-sizing:border-box; 
 
    padding-bottom:10px; 
 
    white-space:nowrap; 
 
} 
 
nav li:before { 
 
    content:""; 
 
    height:100%; 
 
    display:inline-block; 
 
    vertical-align:bottom; 
 
} 
 
nav li a { 
 
    text-decoration: none; 
 
    color: white; 
 
}

<nav class="navbar"> 
 
    <ul> 
 
    <li><a href="#" class="first">Home</a></li> 
 
    <li><a href="#">Assignments</a></li> 
 
    <li><a href="#">Blog</a></li> 
 
    </ul> 
 
</nav> 
 
<div class="bdy"> 
 
    <p>content</p> 
 
</div>

Answer 2

ありあなたのCSSコードには多くの不必要なものがあります。私のスニペットとそこの設定を見て、それはあなたが望むものだと思います。

* { 
 
    margin: 0; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.bdy { 
 
    min-height: 85%; 
 
    background-color: #d2d2d2; 
 
} 
 

 
nav.navbar { 
 
    position: relative; 
 
    height: 15%; 
 
    background-color: red; 
 
} 
 

 
nav ul { 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: 0; 
 
    list-style-type: none; 
 
    text-align: center; 
 
    background-color: #326ada; 
 
    padding: 5px 0 2px 0; 
 
} 
 

 
nav.navbar li { 
 
    display: inline-block; 
 
    margin-left: 1%; 
 
} 
 

 
nav li a { 
 
    text-decoration: none; 
 
    color: white; 
 
}

<nav class="navbar"> 
 
    <ul> 
 
    <li><a href="#" class="first">Home</a></li> 
 
    <li><a href="#">Assignments</a></li> 
 
    <li><a href="#">Blog</a></li> 
 
    </ul> 
 
</nav> 
 
<div class="bdy"> 
 
    <p>content</p> 
 
</div>