如何在OL Li下设置边框

Question

我正在试图弄清楚为什么边界延伸得那么多以及没有从数字开始。

http://kansasoutlawwrestling.com/

样机： http://kansasoutlawwrestling.com/assets/images/wrestling2.jpg

    <div id="sidebar_left">
        <a href="#"><img src="assets/images/ad.png" alt="Spotlight Wrestler"/></a>
        <div id="top5">
            <ol>
                <li>Joe Smith</li>
                <li>John Michaels</li>
                <li>Steve Hart</li>
                <li>Bret Hogan</li>
                <li>Undertaker</li>
            </ol>
        </div>
    </div>

#sidebar_left{width:300px;float:left;}
#sidebar_left img {}
#top5 ol li {padding:11px 0 11px 0;border-bottom:solid 1px gray;}
#top5 ol li:last-child{border:none;}

Answer 1

LI是链接吗？尝试将文本设为链接或只是跨度，然后将边框放在该元素上。向左/右添加填充，使其不会粘附到文本的边缘。如果您希望线条宽度相同，则为父线条提供宽度。

查看我的模型：http://jsfiddle.net/2kJJE/1/

Answer 2

边界将是li宽度的大小，它将是ul的宽度，作为块级元素将是内部宽度它的容器（宽度 - 填充）。

将根据list-style-position呈现数字/项目符号。如果该属性设置为outside，那么它们将在li之外呈现。通常在ol /'ul . If set to inside then they will render inside the li`的填充中考虑外部空间，但文本将正常换行，因此每个项目的内容不会从数字/项目符号中缩进。