Question

这是我刚才回答的问题的后续行动。但是，我意识到解决方案在我的实际代码中引起了另一个问题。

我有编号LI项目的OL列表。我想在数字的每个单独的LI元素OUTSIDE（左边）周围放置一个左边框。我还希望线条正确缩进，这样第2行直接出现在步骤的第1行下方。

（我希望将div包装器保留在LI元素周围。）

<ol>
    <div class = "li_wrapper">
        <li>I am a line. A long line that keeps on going. It's what I do and who I am.</li>
    </div>
    <div class = "li_wrapper">
        <li>I am a line</li>
    </div> 
</ol>

样式：

.li_wrapper{
    font-size:20px;
    margin-top:10px;
}

li{
    border-left:red 2px solid;
    list-style-position: inside; // Fixed border position, but how to fix indent?
}

Answer 1

像这样？

.li_wrapper{
    font-size:20px;
    margin-top:10px;
    padding-left:30px;
    border-left:2px solid red;
}
li{list-style-position: outside;}

<div><b>
   I'd like for the red lines to be to the left of the numbers AND for the text to be indented. 
    </b>
</div><br/><br/>


<div>
    Red line is, incorrectly, to the right of the number:
</div>
<ol id = "one">
    <div class = "li_wrapper">
        <li>I am a line. A long line that keeps on going. It's what I do and who I am.</li>
    </div>
    <div class = "li_wrapper">
        <li>I am a line</li>
    </div>
</ol>

<div>
    Text is not indented:
</div>
<ol id = "two">
    <div class = "li_wrapper">
        <li>I am a line. A long line that keeps on going. It's what I do and who I am.</li>
    </div>
    <div class = "li_wrapper">
        <li>I am a line</li>
    </div>
</ol>

<div>
   Cannot mix and match. Not right.:
</div>
<ol id = "three">
    <div class = "li_wrapper">
        <li>I am a line. A long line that keeps on going. It's what I do and who I am.</li>
    </div>
    <div class = "li_wrapper">
        <li>I am a line</li>
    </div>
</ol>

Answer 2

您可以在ol上使用display：table，然后设置自己的计数器：

http://jsfiddle.net/4rnNK/867/

    ol,

    li {

      margin: 0;

      padding: 0;

    }

    ol {

      counter-reset: foo;

      display: table;

    }

    li {

      list-style: none;

      counter-increment: foo;

      display: table-row;

      padding-left: 1em;

    }

    li::before {

      content: counter(foo)".";

      display: table-cell;

      text-align: right;

      padding-right: .5em;

      padding-left: .3em;

      border-left: red 2px solid;

    }

<ol>
  <li>
    omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam,
  </li>
  <li>
    et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem
  </li>
  <li>
    nemo ab ratione sunt sit rem magni sit fugit unde unde, inventore magni magni ab qui eos ab natus sunt nemo ab fugit
  </li>
  <li>
    omnis error rem enim ipsam ipsam, perspiciatis qui eos inventore laudantium vitae quasi voluptas eaque aut error vitae voluptatem consequuntur aspernatur consequuntur inventore fugit qui ipsa ipsa, quia
  </li>
  <li>
    ipsa ipsam ipsam illo explicabo sit vitae vitae, qui doloremque quae aspernatur aperiam beatae ratione ut aperiam sed dicta qui ipsam ipsa voluptatem voluptatem, error ratione aut rem ipsa
  </li>
</ol>

在编号的项目符号和缩进文本的左侧添加边框

2 个答案: