无序列表中的子弹不包含在块内？

Question

我的子弹在无序列表中遇到问题而突破了他们的块元素。这是正常的，还是子弹不被视为文件流的一部分？

在这个小提琴中，我的无序列表有padding-left:0，你可以看到子弹正在推出他们的容器。 http://jsfiddle.net/E4WWu/1/

我必须给无序列表一些填充来“修复”问题，如下所示：http://jsfiddle.net/E4WWu/

我的问题是：为什么子弹点不包含在<ul>元素中？它是我的页面特定的东西还是我缺少的HTML / CSS中的东西？

提前致谢。

HTML

<div class="center-midright-container">
    <div class="infoBox"><span class="filler">Content Goes Here ...</span></div>
    <div class="innerBottom">
        <h3 class="instructHeader">Instructions<br/></h3>
        <ul class="instructText">
            <li>This is a list of instructions and this sentence is meant to be an item of the list. Each item can wrap around to the next line if it is long enough.</li>
            <li>This is a list of instructions and this sentence is meant to be an item of the list. Each item can wrap around to the next line if it is long enough.</li>
            <li>This is a list of instructions and this sentence is meant to be an item of the list. Each item can wrap around to the next line if it is long enough.</li>
        </ul>
    </div>
</div>

CSS

h3 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
h3 {
    color:#fff;
}
ul {
    list-style-image:url('http://oi43.tinypic.com/wb8nz9.jpg');
    padding-left:10px
}
h3.instructHeader {
    text-decoration:underline;
    text-align:center;
}
.center-midright-container {
    margin:0 auto;
    width: 700px;
}
.innerBottom {
    width:80%;
    border: 3px #b51700 ridge;
    background-color:#000;
    padding:10px;
    margin:0 auto;
    margin-top:25px;
}
.instructText {
    text-align:left;
    line-height:1.5;
    color:#fff;
}
/* This is actually filled with content in my page.  Here now just for a filler */
.infoBox {
    height:500px;
    background-color:#000;
    text-align:center;
    position:relative;
}
.filler {
    position:relative;
    top:47%;
    color:#fff;
}

Answer 1

评论中回答了问题。感谢@Chad和@Mr Lister的帮助。

我没有注意到<ul>元素的默认属性，因为项目符号默认包含在块的OUTSIDE中，而是包含在元素的PADDING中。当我考虑它时，这是有道理的，因为这将允许每个子弹点的文本准确排列。

添加list-style-position: inside;通过将其放置在元素内而不是填充中来修复它。

谢谢！

Answer 2

list-style-position: inside使li文本自动包含项目符号，而这通常不是您想要的。

我相信，确保ul左侧有足够的空白/边距来包围项目符号是最好的解决方法。