如何在 html/css 中的菜单项上添加垂直线 [重复]答案

【问题标题】：How do i add vertical line on my menu item in html/css [duplicate]如何在 html/css 中的菜单项上添加垂直线 [重复]
【发布时间】：2015-09-17 09:46:16
【问题描述】：

我正在尝试这样的菜单导航：

开火|我们的火灾|过去的火灾

我希望菜单项由垂直线而不是空格分隔

<ul class="standard-nav visible-lg">
    <li><a id="intro-linker" class="scroll" href="#intro">Start a fire</a></li>
    <li><a id="about-linker" class="scroll" href="#ourfires">Our fire</a></li>
    <li><a id="services-linker" class="scroll" href="#pastfires">Past fires</a></li>
    <li><a id="team-linker" class="scroll" href="#team">Chief fire lighter</a></li>
    <li><a id="portfolio-linker" class="scroll" href="#seriesfires">Series of fires</a></li>
    <li><a id="contact-linker" class="scroll" href="#contact">Get fired up</a></li>
</ul>

css 在这里：

.standard-nav{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 25px;
    float: right;
}
.standard-nav li{
    display: inline-block;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}    
.standard-nav li > a{
    color: #ffffff;
    font-family: "Vegur Light";
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height:19px;
    /*text-transform: uppercase;*/
}

【问题讨论】：

jQuery UI 选项卡可以工作，但太过分了； this answer 是一个不错的纯 CSS 示例。小提琴：jsfiddle.net/A52T8/234

标签： html css

【解决方案1】：

您可以在 :not(:last-child) 旁边使用伪元素 :after 来不将其应用于最后一个元素：

ul li {
  display: inline-block;
}

ul li:not(:last-child):after {
  content: "|";
  }

<ul class="standard-nav visible-lg">
  <li><a id="intro-linker" class="scroll" href="#intro">Start a fire</a>
  </li>
  <li><a id="about-linker" class="scroll" href="#ourfires">Our fire</a>
  </li>
  <li><a id="services-linker" class="scroll" href="#pastfires">Past fires</a>
  </li>
  <li><a id="team-linker" class="scroll" href="#team">Chief fire lighter</a>
  </li>
  <li><a id="portfolio-linker" class="scroll" href="#seriesfires">Series of fires</a>
  </li>
  <li><a id="contact-linker" class="scroll" href="#contact">Get fired up</a>
  </li>

</ul>

IE8支持反向css规则逻辑：

ul li {
  display: inline-block;
}
ul li:not(:first-child):before {
  content: "|";
}

<ul class="standard-nav visible-lg">
  <li><a id="intro-linker" class="scroll" href="#intro">Start a fire</a>
  </li>
  <li><a id="about-linker" class="scroll" href="#ourfires">Our fire</a>
  </li>
  <li><a id="services-linker" class="scroll" href="#pastfires">Past fires</a>
  </li>
  <li><a id="team-linker" class="scroll" href="#team">Chief fire lighter</a>
  </li>
  <li><a id="portfolio-linker" class="scroll" href="#seriesfires">Series of fires</a>
  </li>
  <li><a id="contact-linker" class="scroll" href="#contact">Get fired up</a>
  </li>

</ul>

参考文献

:after

:not

:last-child

【讨论】：

所以我完全放弃了 css
@BillehSarkozy 如果我理解正确，是的，你可以用纯 css 来做。
由于IE8 supports :first-child but not :last-child，我更喜欢在每个列表项中放置管道字符:before，然后为:first-child覆盖它。
@Blazemonger 感谢您的反馈。更新。老实说，我从来没有想过 IE8。

【解决方案2】：

使用 CSS border:

.standard-nav li {
    border-right: 1px solid red;
}
.standard-nav li:last-child {
    border: none;
}

DEMO

更短

.standard-nav li:not(:last-child) {
    border-right: 1px solid red;
}

DEMO

【讨论】：

我会将边框应用于<ul> 元素而不是<li>。
如何在文本和对角线之间添加空格
@BillehSarkozy 在li 上使用padding jsfiddle.net/tusharj/L6wjrugb/3
我想要左右两边都有间距。当我把填充放在右边时，它不会反射
有没有办法增加红线的高度

【解决方案3】：

你可能会看到这个Fiddle Demo。

整个 HTML 代码：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
.standard-nav{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 25px;
    float: right;
}
.standard-nav li{
    border-right: 2px solid #c4c4c4;
    display: inline-block;
    float: left;
    padding: 0 15px;
}
.standard-nav li:last-child {
    border-right:0;
} 
.standard-nav li > a{
    color: red;
    font-family: "Vegur Light";
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height:19px;
    /*text-transform: uppercase;*/
}
</style>
</head>
<body>
<ul class="standard-nav visible-lg">
    <li><a id="intro-linker" class="scroll" href="#intro">Start a fire</a></li>
    <li><a id="about-linker" class="scroll" href="#ourfires">Our fire</a></li>
    <li><a id="services-linker" class="scroll" href="#pastfires">Past fires</a></li>
    <li><a id="team-linker" class="scroll" href="#team">Chief fire lighter</a></li>
    <li><a id="portfolio-linker" class="scroll" href="#seriesfires">Series of fires</a></li>
    <li><a id="contact-linker" class="scroll" href="#contact">Get fired up</a></li>
</ul>
</body>
</html>

你会观察到：

右边框应用于每个li
删除最后一个li的右边框
出于演示目的，我已将 LINK color 更改为红色 - 您可以稍后将其删除。

【讨论】：

【解决方案4】：

试试这个

li+li { border-left: 1px solid #000000 }

这只会影响相邻的 li 元素

在这里找到http://www.jackreichert.com/2011/07/31/how-to-add-a-divider-between-menu-items-in-css-using-only-one-selector/

【讨论】：