Geek Answers Handbook

Ul and LI elements before and after horizontal alignment

Our web designer wants to have a vertical UL / LI list, for example, the following image.

What we are attempting to obtain

But using this style, I got

enter image description here

the stubble was next

<style type="text/css"> ul { list-style: none; } ul li:after { content: "\25BC \0020"; } ul li:before { content: "\25A0 \0020"; color:#C60; } </style>

Im going to jump to a table, but is there a way to get a aligned list as well if the string is owerflow?

+4
source share
3 answers

This jsfiddle works pretty well, please note that the left edge and text indentation depend on the icon used, but this one they retain their alignment even when changing the font size.

CSS

 ul { list-style: none; width: 150px; font-size: 16px; text-transform: uppercase; } ul li { text-indent: -0.88em; margin-left: 0.88em; position: relative; padding-right: 1em; } ul li:before { content: "\25A0"; color: #C60; vertical-align: text-bottom; margin-right: .25em; } ul li:after { color: #C60; font-size: 0.8em; content: "\25BC"; position: absolute; right: 0; top: 50%; margin-top: -.5em; }

Edit: vertical-align: text-bottom; leads to better alignment of the icon to text in FF for me.

+5
source

You need to set the position: relative parent, ul and position: relative element of pseudo-elements before / after.

 ul { list-style: none; position: relative; } ul li { padding-left: 20px; padding-right: 20px; } ul li:after { content: "\25BC \0020"; position: absolute; right: 5px; } ul li:before { position: absolute; left: 5px; content: "\25A0 \0020"; color:#C60; }

JS Fiddle: http://jsfiddle.net/QgBvb/

+5
source 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <div > <ul> <li> </li> <li class="first"><a href="f.php">Fragrances</a></li> <li> </li> <li><a href="c.php">Cosmetics</a></li> <li> </li> <li><a href="s.php">Stuffed Toys</a></li> <li> </li> <li><a href="b.php">Housing</a></li> </ul> </div> </body> </html>

copy this new file and see the result, u jus should use li and ul correctly

-1
source

More articles:


All Articles