All geek questions in one place

How to separate pipelined link elements

This is the first time you ask a question.

I work with twitter bootstrap on website design. I need to create a navigation menu so that the items listed there are separated by a pipeline. I found another similar question here - Add a channel delimiter after items in an unordered list if this item is not the last in the line , and I used this, but the items are not separated as expected.

What I need to get: http://prntscr.com/4br2lb

After implementing the code from the message I found here, I get the following: http://prntscr.com/4br2yj

Here is my code:

HTML:

<div class="navbar navbar-default navbar-static-top header-menu"> <div class="collapse navbar-collapse navHeaderMenuCollapse"> <ul class="nav navbar-nav navbar-middle navbar-text" style="float:none;margin: 0 auto; display: table;table-layout: fixed;"> <li><a href="#">HOME</a></li> <li><a href="#">AUTO</a></li> <li><a href="#">LIFE</a></li> <li><a href="#">HEALTH</a></li> <li><a href="#">BUSINESS</a></li> <li><a href="#">MORE...</a></li> </ul> </div> </div>

CSS

 ul li { float: left; } ul li:after { content: "|"; padding: 0 .5em; }

Thank you in advance!

+5
source share
2 answers

Why not use a border for every li except the last instead? For instance:

Demo script

 ul li:not(:last-child) { border-right:1px solid grey; margin-right:20px; padding-right:20px; }

Otherwise, you will most likely need to add positioning to your elements :after psuedo or change the display to inline-block - although it is difficult to say without being able to replicate your problem with the provided code.

+4
source

switching a tags to inline blocks fixed by him

 div.navbar a { display: inline-block; } ul li:after { content: "|"; } ul li:last-child:after { content: ""; }

jsfiddle demo

+1
source

Source: https://habr.com/ru/post/1200036/

More articles:


All Articles