Question

所以我的导航栏列表上有一个边框右侧，看起来像this

但是我希望它看起来this这是否可以在不使用图像的情况下实现？

感谢。

Navbar css

.navbar .navbar-inner {
    padding: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}

.navbar .nav li {
    display: table-cell;
    width: 11.1%;
    float: none;
    text-align: center;
    left: 4px;
    font-weight: bold;
    height: 15px;
}

.navbar .nav li a {
    border-right: 1px solid black;
    height: 10px;
    line-height: 10px;
}

#active-link {
    text-decoration: underline;
}

.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

Answer 1

尝试将border-right设置为<a>元素而不是<li>元素。

修改1

由于你的边框右边附有你的元素，试试这个：

.nav li {身高：15px; } .nav li a {身高：10px; }

您现在可能会看到边框小于菜单按钮本身。只需稍微高低一点，看看你想要什么。

修改2

另外添加：

.nav li a { line-height: 15px; }

行高必须与列表项的高度相同。

Answer 2

您可以使用带边框或单个字母的伪

＆＃13;

ul {
  background:#EBEBEB;
}
li {
  display:inline-block;
  line-height:3em;
 
  vertical-align:middle;
}
li + li:before {/* do not on first */
  content: ' | ';
  font-size:0.75em;/* resize it here */
  padding:0 1em; 
  text-shadow: 1px 1px #555;/* or box-shadow or border-style if border used*/
  vertical-align:bottom;/* or else */
}
a {
  color:#222;
}
a:hover , a.active{
  color:#FB853C;

＆＃13;

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#" class="active">About</a></li>
		<li><a href="#">Clients</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</nav>

＆＃13;

用css可以做到这一点吗？显示的图片

2 个答案: