在所有对齐的orizo​​ntally之前和之后的Ul和LI项目

Question

我们的网页设计师想要一个垂直的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>

我要传递到一个表,但是有一种方法可以获得一个对齐的列表,如果线owerflows？

Answer 1

您需要设置位置:父元素的相对值,ul和位置:前/后伪元素的相对值.

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/

Answer 2

这的jsfiddle工作得很好,注意,李左缘和TEXT-INDENT取决于所使用的图标,但像他这样他们保持对齐,即使改变字体大小.

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;为我带来更好的图标到文本对齐.