自定义HTML列表项目符号&文字包装/对齐

时间:2013-08-08 17:30:03

标签: html list textwrapping

我正在尝试创建自己的自定义HTML列表项目符号,遗憾的是我很难对齐文本,任何提示?

我无法更改标记,子弹必须位于锚标记内:

<li> 
   <a href="#"> <div class="bullet"></div> Text </a> 
</li>

这是一个包含我的自定义项目符号和标准项目符号的屏幕:

lists

和JSFiddle:http://jsfiddle.net/XSUYE/

2 个答案:

答案 0 :(得分:3)

以下是一个有效的示例:http://jsfiddle.net/77PFX/

它使用:before伪元素,它会稍微清理你的标记。子弹绝对定位,因此它们不会干扰<li>中内联内容的流动。

<强> HTML

<ul class="list">
    <li><a href="#">Text</a></li>
    <li><a href="#" style="color: red">Text that is a bit too long and shows up under our "bullet"</a></li>
    <li><a href="#">Text</a></li>
</ul>

<强> CSS

ul {
    width: 200px;
}

.list {
    list-style-type: none;

}

.list li{
    list-style-type: none;
    position: relative;
    padding-left: 5px;
}
.list li:before{
    content: ' ';
    display: block;
    width: 10px;
    height: 10px;
    background: #eee;
    border: solid 1px #aaa;
    position: absolute;
    top: 3px;
    left: -15px;
}

<强>截图

Screenshot

答案 1 :(得分:0)

您可以在纯文本周围放置span标签吗?这样你就有了更多的控制权,而子弹仍然留在锚标签内:

enter image description here

见这里:http://jsfiddle.net/vzCpp/1/

ul {
    width: 200px;
    font-family: Arial;
    line-height: 1.5em;
}

.list {
    list-style-type: none;
    margin: 0 !important;
    padding: 10px !important;
}

.list a {
    vertical-align: top;
}

.bullet {
    width: 10px;
    height: 10px;
    background: #eee;
    border: solid 1px #aaa;
    display: inline-block;
    margin-right: -12px;
}

.list a span:last-child {
    display: inline-block;
    margin-left: 24px;
    vertical-align: top;
}