Question

创建html无序列表<ul>是否可以在项目符号之前添加文本？我试图实现的结果看起来与此相似：

T1 * more text1

T2 * more text2

T3 * more text3

其中*是ul中的子弹。我几乎到处搜索但我似乎找不到任何东西，也不知道从哪里开始。我试图在li之前添加文本，但结果不符合我的预期：

T1

的text1

T2

text2的

T3

文字3

Answer 1

在此处使用:before伪将限制使用不同的文本。在项目符号之前用一些标记包装您需要的文本将更容易为其提供适当的类。

检查此JsFiddle以获取工作示例。

Answer 2

这是使用CSS执行此操作的简便方法。首先，删除当前的项目符号：

li{
list-style-type: none;
}

然后，在每个列表项之前，添加要添加的内容，然后添加项目符号。像这样：

ul li:before{
content: 'hi \2022';
}

希望这有帮助！

<强> DEMO

Answer 3

你可以做这个CSS计数器和一个伪元素。

CSS Counters @ MDN

＆＃13;

ul {
  list-style-type: none;
  counter-reset: section;
}
li:before {
  counter-increment: section;
  content: "T"counter(section)". ";
}

＆＃13;

<ul>
  <li>Some Text</li>
  <li>Some Text</li>
  <li>Some Text</li>
  <li>Some Text</li>
  <li>Some Text</li>
</ul>

＆＃13;

Answer 4

您可以尝试在文本和li中显示内联吗？我希望这会有所帮助

Answer 5

<ul>
  <span style="float: left; margin-right: 20px;">Hi!</span><li> Hello</li>
  <span style="float: left; margin-right: 20px;">Hi!</span><li> Hello</li>
  <span style="float: left; margin-right: 20px;">Hi!</span><li> Hello</li>
  <span style="float: left;margin-right: 20px;">Hi!</span><li> Hello</li>
</ul>

http://codepen.io/anon/pen/RPbgmR

无序列表中的子弹之前的文本

5 个答案: