webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

リストからナビゲーション、再び

リセットして、何もしない状態。

f:id:ohta-felica:20160502165629p:plain

float: left; を使って、li を横に並べる

  • ul に overflow: hidden;  li に float: left;をかけた状態。

f:id:ohta-felica:20160502165749p:plain

display: inline-block で li を横に並べてみると…

  • li に display: inline-block を指定した状態。
  • リセットを掛けた状態でも、li の右側にスペースができる。
  • この時、liは下にあるように改行している。

f:id:ohta-felica:20160502170457p:plain

<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">CONTACT</a></li>

</ul>

改行しないと…

  • 右側のスペースが無くなる。
  • display: inline-block; を使うときは、li を改行しないで記述しないと右側にスペースができてしまう、という話。

f:id:ohta-felica:20160502171134p:plain

 <ul>
<li><a href="#">HOME</a></li><li><a href="#">NEWS</a></li><li><a href="#">MENU</a></li><li><a href="#">ACCESS</a></li><li><a href="#">CONTACT</a></li>
</ul>

もろもろ調節して…

f:id:ohta-felica:20160502194930p:plain

ul{
text-align: center;
}
li{
display: inline-block;
}
li a{
border-left: 1px solid #666;
display: block;
padding: 0 8px;
}
li:first-child a{
border-left: none;
}