在我的情况下，ul列表很奇怪 [英] Weird ul list issue in my case

问题描述

我的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列表很奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！