我的子弹在无序列表中超出了其阻止元素范围,出现了问题。这是正常现象吗,还是子弹不被视为文档流程的一部分?
在这个小提琴中,我的列表是无序的padding-left:0
,您可以看到子弹正从其容器中推出。http://jsfiddle.net/E4WWu/1/
我必须给无序列表添加一些填充以“修复”此问题,如下所示:http : //jsfiddle.net/E4WWu/
我的问题是:<ul>
元素为何不包含项目符号?是我的页面特定内容还是HTML / CSS中缺少的内容?
提前致谢。
<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;
}
评论中回答的问题。感谢@Chad和@Mr Lister的帮助。
我没有注意到<ul>
元素的默认属性,因为默认情况下,项目符号位于块的外侧,而在元素的PADDING中包含。当我考虑它时,这是有道理的,因为这样可以使每个项目符号的文本精确地对齐。
list-style-position: inside;
通过将其放置在元素内而不是填充中来添加固定的内容。
谢谢!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句