4

我们的网页设计师想要一个垂直的 UL / LI 列表，如下图所示。

我们试图获得的东西

但是使用我获得的这种风格

在此处输入图像描述

麦粒肿如下

    <style type="text/css">
ul {
    list-style: none;

}
ul li:after {
    content: "\25BC \0020";
}

ul li:before {
    content: "\25A0 \0020"; color:#C60;
}
</style>

我要传递给一张桌子，但如果线路溢出，有没有办法获得一个对齐的列表？

4

3 回答 3

5

您需要设置 position: relative 的父级、ul 和 position: relative 的 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 小提琴：http: //jsfiddle.net/QgBvb/

于 2013-01-29T16:04:00.977 回答
5

这个jsfiddle工作得很好，注意 li 左边距和文本缩进取决于使用的图标，但是像这样即使改变字体大小，它们也会保持对齐。

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

编辑：vertical-align: text-bottom;对我来说，FF 中的图标与文本对齐效果更好。

于 2013-01-29T16:08:12.443 回答
-1 
<!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>

复制这是一个新文件并查看结果，你必须正确使用 li 和 ul

于 2013-01-29T16:03:00.000 回答