用導航條繪製一條小垂直線

我需要畫一條小垂直線，應該在每個導航欄之後出現li。用導航條繪製一條小垂直線

Buut這個問題是每當我嘗試繪製的東西，導航欄變得混亂，導航欄進入第二行。我真的不能畫一條豎線either.here是代碼

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

來源

2016-12-14 uneeb meer

使用右邊框的每個菜單裏，而不是使用hr。

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

並刪除最後一個元素邊框。

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

來源

2016-12-14 11:28:04 Taniya

Ø感謝的人是沒有的伎倆 –

妳歡迎@uneeb :) – Taniya

這將是更小，更乾淨的代碼，如果你使用的CSS選擇器'〜'。 –

您不得添加<hr>元素。只是這樣寫：

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

box-sizing: border-box;是的li寬度不超過其原有的寬度

來源

2016-12-14 11:30:10 Banzay

讚賞.. :) –

可能這是你想要的..

.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; 
 
}

<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>

來源

2016-12-14 11:31:50

讚賞.. :) –

@uneebmeer但仍然可以根據您的需要進行編輯。我只是想給你一個想法。 –

對此感謝.. .. :) –

箱形陰影不會創建新元素。嘗試添加：

@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; 
    }

來源

2016-12-14 11:34:05

你應該看看這個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>

來源

2016-12-14 11:38:32

你可以在你的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; 
}

or instead of using border-right：1px solid＃000;在李你可以在這裏使用圖像作爲背景。

這裏是我的codepen鏈接：http://codepen.io/rounak/pen/dOgLBx

來源

2016-12-14 13:37:50

用導航條繪製一條小垂直線

回答

相關問題