时间戳

首页 > 解决方案 > CSS ul li 格式化

html - CSS ul li 格式化

问题描述

我一直在试图弄清楚如何在编号列表和文本之间放置空格，并且仍然让文本很好地环绕在它上面的行之下。我在 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>

标签： htmlcsslistalignment

解决方案

将任何东西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>

为了使列表编号变为粗体，而不是文本，您可以将olCSS 中的类更改为包括font-weight:900;：

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

然后将您的文本包装<li>为 include <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是可用的最重的重量。

推荐阅读