Responsive Separator for Horizontal List
You can exploit fact that trailing and line trailing white space automatically collapses:
document.write(
'word<b style="background: red; outline: 1px solid blue;"> </b>'
.repeat(42)
);
How to style a horizontal list with bullets between items using CSS?
Here is a further improved version. I kept getting an inconsistency at certain page widths where two bullets would be missing rather than just the last one. i.e.
link1 · link2 · link3 link4
link5 · link6
I think the issue was that removing the last bullet separator could itself affect the text flow if the page width was just right. The new script locks the original text flow by adding and removing literal line breaks.
I have the same script to run every time the screen is resized so you don't get stuck with awkward line breaks.
<style>
ul { width: 700px; text-align : center }
ul li { display: inline; white-space: nowrap; }
ul li:after { content: " \00b7"; }
ul li.nobullet:after { content: none; }
</style>
<body onresize="processBullets()" onload="processBullets()">
<ul>
<li><a href="http://google.com">Harvard Medical School</a></li>
<li><a href="http://google.com">Harvard College</a></li>
<li><a href="http://google.com">Harvard Medical School</a></li>
<li><a href="http://google.com">Harvard College</a></li>
<li><a href="http://google.com">Harvard Medical School</a></li>
<li><a href="http://google.com">Harvard College</a></li>
<li><a href="http://google.com">Harvard Medical School</a></li>
<li><a href="http://google.com">Harvard College</a></li>
</ul>
<body>
<script>
function processBullets() {
var lastElement = false;
$("br").remove(".tempbreak");
$("ul li").each(function() {
$(this).removeClass("nobullet");
if (lastElement && lastElement.offset().top != $(this).offset().top) {
$(lastElement).addClass("nobullet");
$(lastElement).append('<br class="tempbreak" />');
}
lastElement = $(this);
}).last().addClass("nobullet");
}
</script>
css responsiveness from vertical to horizontal divider when shrink the window
Use a CSS border
. In mobile, make it a top or bottom border (so it is horizontal), and on desktop make it a left or right border (so it is vertical) with a @media
query.
Add a pipe separator after items in an unordered list unless that item is the last on a line
This is possible with flex-box
The keys to this technique:
- A container element set to
overflow: hidden
. - Set
justify-content: space-between
on theul
(which is a flex-box) to force its flex-items to stretch to the left and right edges. - Set
margin-left: -1px
on theul
to cause its left edge to overflow the container. - Set
border-left: 1px
on theli
flex-items.
The container acts as a mask hiding the borders of any flex-items touching its left edge.
.flex-list {
position: relative;
margin: 1em;
overflow: hidden;
}
.flex-list ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-left: -1px;
}
.flex-list li {
flex-grow: 1;
flex-basis: auto;
margin: .25em 0;
padding: 0 1em;
text-align: center;
border-left: 1px solid #ccc;
background-color: #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<div class="flex-list">
<ul>
<li>Dogs</li>
<li>Cats</li>
<li>Lions</li>
<li>Tigers</li>
<li>Zebras</li>
<li>Giraffes</li>
<li>Bears</li>
<li>Hippopotamuses</li>
<li>Antelopes</li>
<li>Unicorns</li>
<li>Seagulls</li>
</ul>
</div>
Separators for Navigation
Simply use the separator image as a background image on the li
.
To get it to only appear in between list items, position the image to the left of the li
, but not on the first one.
For example:
#nav li + li {
background:url('seperator.gif') no-repeat top left;
padding-left: 10px
}
This CSS adds the image to every list item that follows another list item - in other words all of them but the first.
NB. Be aware the adjacent selector (li + li) doesn't work in IE6, so you will have to just add the background image to the conventional li (with a conditional stylesheet) and perhaps apply a negative margin to one of the edges.
Does bootstrap 4 have a built in horizontal divider?
HTML already has a built-in horizontal divider called <hr/>
(short for "horizontal rule"). Bootstrap styles it like this:
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<p>
Some text
<hr/>
More text
</p>
Related Topics
How to Have Two Fixed Width Columns With One Flexible Column in the Center
How to Set a Background-Color For the Width of Text, Not the Width of the Entire Element, Using Css
Two Inline-Block, Width 50% Elements Wrap to Second Line
How to *Really* Justify a Horizontal Menu in Html+Css
Why Doesn't "Margin: Auto" Center an Element Vertically
Css3 Transition Doesn't Work with Display Property
Add a Horizontal Scrollbar to an HTML Table
Starting with a Forward Slash in HTML for "Href"
What Characters Are Allowed in an HTML Attribute Name
Best Way to Include Css? Why Use @Import
Fixed Header, Footer With Scrollable Content
What Is the HTML Tabindex Attribute
Ng-App Vs. Data-Ng-App, What Is the Difference
CSS Background Image Not Loading