Yatay CSS menü HTML listeleri kullanarak oluşturdum.

ben.e

<ul id="navigation">
<li id="youarehere"><a href="#">Home</a></li> 
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
</ul>

vb...

Her şey olması gerektiği gibi, üzerinde bağlantıları geldiğinizde bekliyoruz çalışıyor. Sen, bağlantılar için kalın vurgulu bir devlet yarattım ve şimdi menü bağlantılar kalın boy farkından dolayı değişim görebilir.

Her yerde çözüm aradım, ve bulamadım. Elbette, sadece bunu yapmak için çalışıyorum değilim.

http://www.sitepoint.com/forums/showthread.php?t=593181

Ben yukarıdaki yazıyı aynı sorunla karşılaşıyoruz. Ancak, sonrası uygun bir çözüm yok. Herkes herhangi bir fikir var mı?

Menü metni genişliğini bilmiyorum ve sadece li genişliğini ayarlayın. P. S:

Bu benim kod:

HTML:

              <ul class="nav">
                <li class="first"><a href="#">item 0</a></li>
                <li><a href="#">item 1</a></li>
                <li><a href="#">item 2</a></li>
                <li><a href="#">item 3</a></li>
                <li><a href="#">item 4</a></li>
              </ul>

CSS:

              .nav {    margin:0; padding:0; }

              .nav li { list-style:none; display:inline; border-left: #ffffff 1px solid}

              .nav li a:link, .nav li a:visited {   text-decoration:none; color:#ffffff; margin-left:8px; margin-right:5px;}

              .nav li a:hover{ text-decoration:none; font-weight:bold; }

              .nav li.first {border:none;}

JSfiddleçalışma örnek kontrol edin. Fikir kalın (veya :hover herhangi bir devlet stilleri) içeriği :after sözde elemanı için alan ayırmak ve içeriği için bir kaynak olarak başlık etiketi kullanıyor.

CSS:

li, a {
    display:inline-block;
    text-align:center;
}
a:hover {
    font-weight:bold;
}
a::after {
    display:block;
    content:attr(title);
    font-weight:bold;
    height:1px;
    color:transparent;
    overflow:hidden;
    visibility:hidden;
    margin-bottom:-1px;
}

HTML:

<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>