在列表項旁邊創建一條垂直線

我想在每個列表項右邊放一條垂直線（除了最後一條），但我想知道是否有一種方法可以做到，而不是添加一個新的div或東西來容納這條線。我嘗試爲列表添加一個邊框線，但它比我需要的添加了一個。在列表項旁邊創建一條垂直線

HTML

<ul class="list"> 
      <li><span id = "home">Home</span></li> 
      <li><span id = "about">About</span></li> 
      <li><span id = "portfolio">Portfolio</span></li> 
      <li><span id = "contact">Contact</span></li> 
     </ul>

CSS

.list li { 
display: inline; 
margin: 0px 25px 0px 0px; 
white-space: nowrap; 
font-family: Oswald; 
color: white; 
} 

.list { 
    text-align: right; 
    padding-right: 2%; 
    } 

#home { 
height: 50px; 
background-color: black; 

}

來源

2014-08-30 user3769402

只需添加一個右邊框所有li元素，然後從使用:last-child僞類中的最後一個刪除它。這將適用於動態內容。

Example Here

.list li { 
    display:inline-block; 
    border-right:2px solid; 
    padding:10px; 
} 
.list li:last-child { 
    border-right:none; 
}

或者，你也可以只使用:not()僞類，並避免將邊境開始與最後一個元素。

Example Here

.list li:not(:last-child) { 
    border-right:2px solid; 
}

支持這兩種方法都可以在這裏找到 - http://caniuse.com/#feat=css-sel3

如果支持是一個問題，你也可以交替只需添加一個左邊框和刪除第一個子元素。（:first-child比:last-child/:not有更多的瀏覽器支持）。我懷疑你需要支持舊版本的IE。

Example Here

.list li { 
    display:inline-block; 
    border-left:2px solid; 
    padding:10px; 
} 
.list li:first-child { 
    border-left:none; 
}

來源

2014-08-30 16:13:11

這工作十分感謝！ – user3769402 2014-08-30 22:53:38

我可能會設定一個邊界，權利的整個列表上，並使用jQuery刪除它的最後一項。

這是有點麻煩，如果你不知道的時間提前了最後一個項目的ID，但如果它總是將是「聯繫，」你可以說

$("#contact").attr('style','border-right:none');

來源

2014-08-30 16:13:24 stranger

您可以添加此：

li:before { 
    content: " | "; 
} 
li:first-child:before { 
    content: none; 
}

或者：

li:not(:first-child):before { 
    content: " | "; 
}

來源

2014-08-30 16:19:51

可以實現，通過對每一個<li>項添加邊框和只需使用css last child selector：li:last-child刪除最後一個元素的邊框，選擇其父元素的最後一個li元素。

你甚至可以將它與:not選擇器結合使用，以實現它與一個CSS塊。

JSFiddle Demo

來源

2014-08-30 16:23:39

這裏有一個更加普遍和簡單的解決方案，將在舊的瀏覽器工作順利：http://jsfiddle.net/pw3vpvLv/。

HTML：

<ul> 
    <li>Home</li> 
    <li>About</li> 
    <li>Portfolio</li> 
    <li>Contact</li> 
</ul>

CSS：

ul > li { 
    display:inline-block; 
    padding: 5px 10px; 
} 

ul > li + li { 
    border-left: 1px solid; 
}

來源

2014-08-30 18:28:28 DRD

在列表項旁邊創建一條垂直線

回答

相關問題