Jika ingin sebuah menu mendatar dengan menggunakan kode css berikut ini caranya.
Gunakan CSS. Kode harus:
<style>
ul li {width:200px;float:left}
ul li span {width:100%;display:block}
</style>
<ul>
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
</ul>
Span adalah elemen inline sehingga tidak memiliki atribut tinggi atau lebar, di atas saya menggunakan CSS untuk mengubahnya menjadi satu blok.
<style>
ul {list-style:none;width:100%}
ul li {width:25%;float:left}
</style>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
</ul>
Dalam hal ini, membagi lebar, 100%, dengan jumlah elemen LI,, 4 100 / 4 = 25% yang lebar ideal setiap LI (tanpa margin & padding)
Anda harus mengapung mereka untuk hal ini:
ul {
list-style: none;
}
ul li {
float: left;
width: 100px; /* Or whatever arbitrary amount you want */
}
Daftar ini secara otomatis span lebar kontainer - elemen blok tersebut.
Saya pikir Anda bisa melakukan:
<style>
ul, li{float:left;margin;padding:0;display:block;}
li {clear:left;width:100%;margin:1px 0;background:#03a;}
</style>
<ul>
<li>Item 1</li>
<li>Item 2 which is longer</li>
<li>Item 3</li>
</ul>
bekerja di beberapa browser. Seingat saya tidak bekerja di IE, dan harus membuatnya bekerja dengan menggunakan ekspresi css.
Idenya adalah bahwa ul li dan adalah melayang untuk mengecilkan mereka untuk lebar konten mereka. li ini adalah dibersihkan dan set ke 100% dari luas wadah mereka, wadah yang sama yang menciut untuk ukuran mereka.
Pilihan Anda yang lain adalah tidak mungkin dalam CSS kecuali anda tahu jumlah item daftar. Meskipun jika Anda tidak tahu jumlah item daftar itu berarti ada scripting terjadi di kedua sisi server atau sisi client, dan Anda dapat mengetahui jumlah item. :)
Saya telah memecahkan ini di masa lalu dengan memberikan kelas ul dengan jumlah anak di dalamnya, dan menggunakan banyak aturan-aturan CSS untuk menampilkan list item yang mendatar itu.
misalnya:
<style>
ul.lis1 li {width:100%}
ul.lis2 li {width:50%}
ul.lis3 li {width:33.3%}
ul.lis4 li {width:25%}
/* ... you can keep going forever here, though there'll be a point at which they become too thin and your UI breaks anyway, */
</style>
<ul class="lis4">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
Cara Lain yang lebih praktis, seperti ini:
Masukkan kode CSS ini ke dalam skin.
.menu{
width: 100%;
background-color: #333;}
.menu ul{
margin: 0;
padding: 0;
float: left;}
.menu ul li{
display: inline;}
.menu ul li a{
float: left;
text-decoration: none;
color: #fff;
padding: 10.5px 11px;
background-color: #333;}
.menu ul li a:visited{
color: #fff;
text-decoration: none;}
.menu ul li a:hover, .menu ul li .current{
color: #fff;
background-color:#0b75b2;}
Lalu masukkan kode ini kedalam widget HTML/Javascript, dimana anda inginkan:
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<br style="clear: left" />
</div>
Silahkan mencobanya satu persatu dan menemukan formula yang tepat untuk tampilan blog anda. Selamat mencoba...