繁体   English   中英

CSS ul li格式

[英]CSS ul li formatting

我一直在尝试找出如何在带编号的列表和文本之间放置空格,并且仍然使文本很好地环绕在其上方的行下。 我在Stack Overflow上找到了一些可以正常工作的脚本,但由于某种原因,我只能得到项目符号,而不能得到数字。

谢谢。

 ul { margin: 0; padding: 50; } /* The wider the #list_wrapper is, the more columns will fit in it */ #list_wrapper { width: 1000px } /* The wider this li is, the fewer columns there will be */ ul.multiple_columns li { text-align: right; float: right; list-style: decimal; height: 30px; width: 400px; } 
 <form id="form1" runat="server"> <div> <div id="list_wrapper"> <ul class="column-count: 2;"> <li>One: If I knew how to spell the ABC's I would write and write and write and write and write and write and write some more and write and write and write and write and write and write and write.</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> </ul> </div> </div> </form> 

ul (无序列表)更改为ol (有序列表)。

CSS变为:

ol{
margi... }

ol.multiple_columns li{
    text-align: right;
    float: ri... }

HTML变成:

<ol class="column-count: 2;">
<li>One: If I knew ...</li>
<li>Two</li>
...
</ol>

为了使列表编号为粗体而不是文本,您可以在CSS中将ol类更改为包括font-weight:900;

ol {
  margin: 0;
  padding: 50;
  font-weight: 900;
}

然后包装<li>的文本以包含<span style="font-weight:normal;"></span> ,如下所示:

<li><span style="font-weight:normal;">One: If I knew how to spell  ... </span></li>

如果不使跨度将文本恢复为正常的粗细,则数字和文本都将为粗体。 顺便说一句, font-weight范围为100-900。 900是最重的重量。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM