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

Posted 2023-04-13

技术标签:

【中文标题】如何在 html/css 中的菜单项上添加垂直线 [重复]【英文标题】：How do i add vertical line on my menu item in html/css [duplicate] 【发布时间】：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 【参考方案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

color

【讨论】：

【参考方案4】：

试试这个