如何在html和css中做到這一點？

-3

現在，我有這樣的：

，不過爲什麼我能夠在添加這些行選項之間的全高？

<ul id="navigation"> 
    <li><a href="#">Log In</a></li> 
    <li><a href="#">VIP Membership</a></li> 
    <li><a href="#">Best Players</a></li> 
    <li><a href="#">Administrators</a></li> 
    <li><a href="#">Forums</a></li> 
</ul> 

#navigation { 
    float: right; 
    padding-top: 8px; 
    font-size: 18px; 
    font-family: Arial; 
} 

#navigation li { 
    padding: 2px; 
    margin: 0; 
    float: left; 
    list-style: none; 
}

來源

2014-01-28 JM8-Real

使用權和左邊框。並在'li'上設置行高或填充而不是父項。在來這裏之前，你真的應該嘗試一下。 – jeroen

是的。此外，如果您發佈了所有代碼或jsfiddle，它將會有所幫助。我甚至不能在這裏看到你的ul元素的樣式，這很重要，因爲有幾個變種可以完成你想要做的事情。 – bboysupaman

你的問題線在全高度的選項之間 - 答案是border-left: 1px solid #666666

Fiddle

#navigation 
{ 
    width: 100%; 
    list-style-type: none; 
    background: #000000; 
    text-align: center; 
} 
#navigation li 
{ 
    display: inline-block; 
    height: 70px; 
    line-height: 70px; 
    border-left: 1px solid #666666; 
} 
#navigation li:last-child 
{ 
    border-right: 1px solid #666666; 
} 
#navigation li a 
{ 
    text-decoration: none; 
    color: #FFFFFF; 
    padding: 10px 15px 10px 15px; 
    font-family: arial; 
} 
#navigation li a:hover 
{ 
    color: red; 
}

來源

2014-01-28 13:43:54 Karuppiah

非常感謝，這給了我極大的幫助！ –

@ user3244670：沒問題。下次在提問之前發佈您的相關代碼，否則您會得到太多的低價。 – Karuppiah

我明白了，這實際上是我在這裏的第一篇文章，所以我不知道這裏的一切都是如何。你也許知道如何增加深度線？ –

我想你可以使用CSS邊框屬性。嘗試是這樣的：

#navigation li:not(:first-child) { 
    border-left: 1px gray solid; 
}

來源

2014-01-28 13:36:47 dotmartin

+懸停效果，使文本橙色 – Jacob

如何在html和css中做到這一點？

回答

相關問題