Merhaba arkadaşlar,
Bazı arkadaşlar çok daha ileri şeyler beklerken bazı arkadaşlar ise ufak detaylar / püf noktalar bekliyor o yüzden 2 ileri bir geri yapacağım.
Bugün ki konumuz
<ul> içindeki <li>’leri ortalamak veya <ul> içine <li>’leri bulunduğu genişliğe yaymak.
<ul> içindeki <li>’leri ortalamak için :
<ul> tagına
|
1 2 |
width : genişlik; text-align:center; |
<li> taglarına
|
1 2 |
display:inline-block; float:none; |
Kodlar :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
ul.ornek2 { width: 800px; height: 50px; background: red; border-radius: 4px; padding: 0; margin: 50px auto; text-align: center; } ul.ornek2 li { font-size: 18px; line-height: 50px; font-family: Calibri; cursor: pointer; list-style: none; display: inline-block; padding: 0 15px; } ul.ornek2 li:hover { background: #e3e3e3; color: #000; } |
Ön izleme (alttaki) -> http://cdpn.io/wpDfz
<ul> içindeki <li>’leri yaymak için :
Ayrıca bu örnekte dikey ortamala olayıda vardır.
<ul> tagına
|
1 2 3 |
width : genişlik; display:table; float:none; |
<li> taglarına
|
1 2 |
display:table-cell; float:none; |
Kodlar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/*ornek1*/ ul.ornek1 { width: 800px; height: 50px; background: red; border-radius: 4px; display: table; padding: 0; margin: 50px auto; } ul.ornek1 li { display: table-cell; font-size: 18px; vertical-align: middle; font-family: Calibri; text-align: center; list-style: none; cursor: pointer; } ul.ornek1 li:hover { background: #e3e3e3; color: #000; } |
Ön izleme (üstteki) -> http://cdpn.io/wpDfz
Tarayıcı Desteği
2. örnek İnternet Explorer 8 ve üstünde sorunsuz çalışıyor.
Allah razı olsun
Teşekkürler, işime yaradı gerçekten 🙂