水平UL上的垂直分隔器问题

时间:2015-01-17 19:02:42

标签: html css

我尝试在导航栏上添加一个垂直分隔符,但我现在在第一个列表项的开头有一个分隔符,我无法摆脱它。我只想让它看起来像这样:首页|联系

Here是查看问题的网站。先感谢您 :)

#nav ul {
	margin: 0;
	padding: 0;

}

#nav li {
	display: inline;
	list-style-type: none;
	font-family: 'Open Sans', sans-serif;
	font-size:20px;
	
}

#nav li:before {
content: " | ";
}

#nav li:first-child:before {
content: none;
}
<div id="nav"> <!-- nav open -->

 <ul> <!-- ul open -->
  <li><a class="menu" href="index.html">Home</a></li>
  <li><a class="menu" href="https://dbayliss.typeform.com/to/Jm3wF9">Contact</a></li>
    
</ul> <!-- ul close -->

</div> <!-- nav close -->

1 个答案:

答案 0 :(得分:0)

:first-child定义为:

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

你有a标记作为父ulli之前的第一个元素(顺便说一下,这是无效的HTML)。

您(应该)可以将其删除,并且您当前的代码可以正常运行:

:FIRST-CHILD EXAMPLE

或者您可以改为使用nth-of-type()

#nav li:nth-of-type(1):before {
   content: none;
}

NTH_OF_TYPE EXAMPLE

使用border属性:

#nav ul {
    margin: 0;
    padding: 0;

}

#nav li {
    display: inline;
    list-style-type: none;
    font-family: 'Open Sans', sans-serif;
    font-size:20px;
    border-right: 1px solid black;
    padding: 0 8px;

}

#nav li:last-child{
    border: none;
}

BORDER EXAMPLE