html - 在编号元素符号和缩进文本的左侧添加边框

Question

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

我有一个 OL 列表，其中包含编号的 LI 元素。我想在数字外部(左侧)的每个单独的 LI 元素周围放置一个左边框。我还希望这些行正确缩进，以便第 2+ 行直接出现在步骤的第 1 行下方。

这是最新的 fiddle http://jsfiddle.net/z7gkLnc7/5/

(我想保留 LI 元素周围的 div 包装器。)

<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>