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

webかたつむり

ウェブデザインを勉強中

ul 再考

寸法を何も指定しない状態 

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

#wrapper{

width:450px;
margin: 0 auto;
padding: 100px 0 0 0;
}
ul { overflow: hidden;}
li{ float: left;width: 180px;height: 60px;}
li a { display: block;}
</style>

</head>

<body>
<div id="wrapper">
<ul>
<li><a href="#">いちばんめ</a></li>
<li><a href="#">にばんめ</a></li>
<li><a href="#">さんばんめ</a></li>
<li><a href="#">よんばんめ</a></li>
<li><a href="#">ごばんめ</a></li>
</ul>

 

  •  li に幅と高さを指定する
  • li は180:px*60px 、 li aは180px*20px
  • li a に幅と高さを指定する
  • li も li a も180:px*60px