CSS unordered list in one line
Format a simple unordered list <ul></ul>
of elements, like this …
… to an one liner with some content before and after the joined elements
This is the css
, which will place an arrow before and brackets after each element. The first and the last list element will be extra handled.
<style>
ul.one-line-list:before { display: inline; }
ul.one-line-list { display: block; }
ul.one-line-list li {
display: inline;
cursor: default;
width: 100%;
font-size: 2em;
}
ul.one-line-list li:first-child a:before { content: '$obj➔'; }
ul.one-line-list li:last-child a:after { content: "();"; }
ul.one-line-list li a:before { content: "➔"; color: silver; }
ul.one-line-list li a:after { content: "()"; color: silver; }
ul.one-line-list li a { text-transform: lowercase; }
ul.one-line-list a { color: red; text-decoration: none; }
</style>
In the html
you need just the css class on the ul-element.
<ul class="one-line-list">
<li><a href="/h">Hello</a></li>
<li><a href="/l">List Element</a></li>
<li><a href="/w">Wrapped</a></li>
<li><a href="/a">As A Single Line</a></li>
<li><a href="/e">Example</a></li>
</ul>
Weitere Beiträge innerhalb der Kategorie
Weitere Beiträge