本文介绍了在我的情况下,ul列表很奇怪的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的ul列表有一个奇怪的问题
I am having a weird issue with my ul list
我有类似的东西
<section id='slide-container'>
<h1>Slide</h1>
<div class='break'></div>
<div id='left-nav'><a href='#'><img src='images/left-nav.png'/></a></div>
<ul id='slide-list'>
<li><img src='images/slide1.png' /></li>
<li><img src='images/slide2.png' /></li>
<li><img src='images/slide3.png' /></li>
<li><img src='images/slide4.png' /></li>
<li><img src='images/slide5.png' /></li>
</ul>
<div id='right-nav'><a href='#'><img src='images/right-nav.png'/></a></div>
</section>
my css
#slide-container{
width: 708px;
height: 1px;
line-height: 190px;
border:solid 1px #EEEEEE;
white-space: nowrap; overflow: auto;
}
#slide-container h1{
margin:8px 10px 0 10px;
font-size: .8em;
display: inline-block;
}
section #slide-list {
display: inline-block;
height: 142px;
}
section #slide-list li{
display: inline-block;
width: 162px;
height: 142px;
background-color: grey;
line-height: 142px;
vertical-align: middle;
margin: 0 6px;
}
section #left-nav{
display:inline-block;
line-height: 120px;
vertical-align: middle;
}
section #right-nav{
display: inline-block;
line-height: 120px;
vertical-align: middle;
}
.break{
clear:both;
}
由于某种原因,我的幻灯片列表li被下推20至30
For some reason, My slide-list li is pushed down for 20 to 30 px.
我的愿望结果
虚线是幻灯片容器div
dash line is slide-container div
-----------------------------------------------
|
|
| left nav slide slide slide slide right nav
|
|
----------------------------------------------
我的代码结果
-----------------------------------------------
|
|
|
| left nav slide slide slide slide right nav
|
----------------------------------------------
我不明白这里会发生什么。我还重置了CSS,使所有元素的边距和填充为零。有人可以帮我吗?非常感谢!
I don't understand what happen here. I also reset my css to have zero margin and padding for all elements. Can someone help me about it? Thanks a lot!
推荐答案
在这种情况下,所有元素默认都具有属性 ul
:
For default all elements has properties in this case ul
:
ul {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px;
}
您需要重置这些属性:尝试
You need to reset those properties : Try
ul {
margin:0;
padding:0;
}
这篇关于在我的情况下,ul列表很奇怪的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!