Question

我需要绘制一个小垂直线，应该出现在每个导航栏li之后。

Buut问题是，每当我尝试绘制某些内容时，导航栏就会搞砸，导航栏会进入第二行。我不能真正画一条垂直线。这里有代码

HTML

<!DOCTYPE HTML>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Double Double</title>
    <link rel="shortcut icon"  href="favicon.ico">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700%7CRoboto+Slab:400,100' rel='stylesheet' type='text/css' />
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/double.css" rel="stylesheet">
</head>

<body>
<nav class="navbar" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div style="margin: auto;display: table;">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <hr class="vertical"/>
                    <li><a href="#">Deals</a></li>
                    <li><a href="#">Pickup Deals</a></li>
                    <li><a href="#">Menu</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </div>
</nav>
</body>
</html>

CSS

/*navbar properties */
.navbar .brand {
    max-height: 40px;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
}
.navbar a.navbar-brand {
    padding: 9px 15px 8px;
}
.navbar{
    font-family: young;
    clear: both;
}
.navbar a{
    color: #515254;
}
.navbar-nav{
    font-size: 20px;
    padding-top: 20px;
}
#bs-example-navbar-collapse-1{
    float: left;
}
.nav > li > a:hover, .nav > li > a:focus{
    color: #007f3d;
    background: none;
}
.navbar-toggle .icon-bar {
    background-color: black;
}

.navbar-toggle {
    border: 1px solid #000;
}
.verticalLine {
    border-left: thick solid #ff0000;
}
hr.vertical
{
    color: black;
    width: 0px;
    height: 100%; /* or height in PX */
}
/*navbar properties */

JSFIDDLE

Answer 1

对每个菜单li使用border-right而不是使用hr。

.navbar-nav>li{
  border-right: 1px solid #000;
}

并删除最后一个元素边框。

.navbar-nav>li:last-child{
   border: none;
}

Answer 2

您可能无法添加<hr>元素。写下这个：

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

box-sizing: border-box;的宽度为li，不会超过其原始宽度

Answer 3

可能这就是你想要的......

＆＃13;

.navbar-default {
  background: #005986;
}
.navbar {
  border: 0;
  border-radius: 0;
}
ul.nav {
  list-style: none;
  border-right: 1px solid #84B6D0;
}
ul.nav li {
  padding: 20px 0;
  display: inline-block;
}
ul.nav li a {
  padding: 20px 10px;
  color: #fff;
  position: relative;
}
ul.nav li a:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 60%;
  right: 0;
  background: red;
  top: 50%;
  transform: translate(0, -50%);
}
ul.nav li:first-child a:before {
  position: absolute;
  content: "";
  width: 2px;
  height: 60%;
  left: 0;
  background: white;
  top: 50%;
  transform: translate(0, -50%);
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: blue;
}
.navbar-default .navbar-nav>li>a:hover {
  background: #022E44;
}

＆＃13;

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
      <li><a href="#">Link 4</a>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

Answer 4

Box-shadow不会创建新元素。尝试添加：

@media (min-width: 768px)
    .navbar-nav > li {
        ...
        box-shadow: inset -1px 0 0 0 black; // high element or..
        box-shadow: 16px 0 0 -15px black;  // .. closer to text height
    }
    .navbar-nav > li:last-of-type {
        ...
        box-shadow: none;
    }

Answer 5

你应该看看这个css选择器~。

http://www.w3schools.com/cssref/css_selectors.asp

ul li {
  display: inline-block;
  padding: 0 10px;
}
ul li ~ li {
  border-left: 1px solid #333;
}

<ul>
  <li>
    <span>Item</span>
  </li>
  <li>
    <span>Item</span>
  </li>
  <li>
    <span>Item</span>
  </li>
</ul>

Answer 6

您可以在css文件中添加以下行。问题将得到解决。

ul.navbar-nav li{
  float: left;
  list-style: none;
  padding: 0px 6px;
  border-right: 1px solid #000;
}
ul.navbar-nav li a{
  text-decoration: none;
}
ul.navbar-nav li:last-child{  
  border-right: none;
}

或代替使用border-right：1px solid＃000;在li中，您可以在此处使用图像作为背景。

这是我的codepen链接：http://codepen.io/rounak/pen/dOgLBx

Answer 7

ul li {
  display: inline-block;
  padding: 0 10px;
}
ul li ~ li {
  border-bottom: 1px solid #333;
}

<ul>
  <li>
    <span>Item</span>
  </li>
  <li>
    <span>Item</span>
  </li>
  <li>
    <span>Item</span>
  </li>
</ul>

使用导航栏

7 个答案: