列表中未包含无序列表中的项目符号?

肖恩

我的子弹在无序列表中超出了其阻止元素范围,出现了问题。这是正常现象吗,还是子弹不被视为文档流程的一部分?

在这个小提琴中,我的列表是无序的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;
}
肖恩

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

我没有注意到<ul>元素的默认属性,因为默认情况下,项目符号位于块的外侧,而在元素的PADDING中包含。当我考虑它时,这是有道理的,因为这样可以使每个项目符号的文本精确地对齐。

list-style-position: inside;通过将其放置在元素内而不是填充中来添加固定的内容。

谢谢!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

列表中未包含无序列表中的项目符号?

来自分类Dev

无序列表中项目符号之前的文本

来自分类Dev

删除开关的无序列表中的项目符号

来自分类Dev

从无序列表中删除项目符号

来自分类Dev

Reportlab无序列表未显示项目符号

来自分类Dev

在无序列表中查找重复的项目

来自分类Dev

CSS-无序列表中项目符号之间的垂直线

来自分类Dev

如何在UITextView中的每一行添加无序列表或项目符号

来自分类Dev

使用 NSHTMLTextDocumentType 属性的 UITextView 中具有无序列表的重复项目符号

来自分类Dev

如何在无序列表中添加项目?

来自分类Dev

如何从无序列表中“删除”项目

来自分类Dev

替换无序列表中的列表项

来自分类Dev

无序列表和动态项目符号图像

来自分类Dev

display:table时显示无序列表的项目符号

来自分类Dev

未在预期位置显示的无序列表项目符号

来自分类Dev

在无序列表中查找重复项

来自分类Dev

从无序列表中删除填充

来自分类Dev

如何区分CSS中的无序列表?

来自分类Dev

尝试在php中创建无序列表

来自分类Dev

无序列表中的奇怪空间

来自分类Dev

无序列表中的jQuery函数

来自分类Dev

引导工具提示中的无序列表

来自分类Dev

如何缩进无序列表中的换行?

来自分类Dev

在 Angularjs 中创建无序列表

来自分类Dev

CSS 中的无序列表不会居中

来自分类Dev

有序列表中的无序列表

来自分类Dev

从引导程序列表中删除单个项目符号图标

来自分类Dev

使用PHP计算无序列表中列表项的总数

来自分类Dev

计算多个无序列表中的列表项(ul)