Html 无序列表中的项目符号不包含在块中？

我在无序列表中的项目符号从其块元素中脱离时遇到问题。这是否正常，或者项目符号不被视为文档流的一部分

在这把小提琴中，我的无序列表有

左填充：0

，您可以看到子弹正从容器中推出

我必须给无序列表一些填充，以“修复”问题，如图所示：

我的问题是：为什么项目符号不包含在

元素中？这是我的页面中的特定内容还是HTML/CSS中缺少的内容

提前谢谢

HTML

---

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

我没有注意到

元素的默认属性，因为默认情况下，项目符号包含在块的外部，而不是元素的填充中。当我考虑它时，这是有意义的，因为这将允许每个要点的文本精确排列

添加

列表样式位置：内通过将其放置在元素内部而不是填充中来修复它

谢谢
 列表样式位置：inside

使

li

文本环绕项目符号，这通常不是您想要的

---

我相信，确保

ul

左侧有足够的边距/填充物来容纳项目符号是最好的解决方案。

您可以尝试

列表样式位置：内部？哇，真是太棒了。。。谢谢你，查德。因此，我猜测默认情况下，项目符号不包含在元素中，除非您明确告诉它们使用
列表样式position:inside
？没错；它们通常位于
ul
元素的填充范围内。您使填充变小了，因此
li
元素及其项目符号都向左移动。啊，好的，因此它们在填充中，而不是实际的元素本身。那就可以解释了。每天学点新东西：）对；
ul
的初始（默认）填充是40px。您知道有什么方法可以计算所需的填充，而不必胡乱猜测吗？我希望我的项目符号在外面，这样列表元素就不会被包裹——但基本上我希望项目符号位于
的左边缘
<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>

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