Question

我的ul列表有一个奇怪的问题

我有类似

的东西

<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像素。

我的愿望结果

虚线是幻灯片容器div

 -----------------------------------------------
|                                              
|
|  left nav slide slide slide slide right nav
|
| 
 ----------------------------------------------

我的代码结果

 -----------------------------------------------
|                                     
|
|  
|    left nav slide slide slide slide right nav
| 
 ----------------------------------------------

我不明白这里发生了什么。我还重置了我的CSS，所有元素都有零余量和填充。有人可以帮我吗？非常感谢！

Answer 1

默认情况下，所有元素在这种情况下都具有属性ul：

ul {
  display: block;
  list-style-type: disc;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  padding-start: 40px; 
}

您需要重置这些属性：尝试

ul {
  margin:0;
  padding:0;
}

Answer 2

问题在于你的行高。从#left-nav，#right-nav和#slide-list li中删除这些内容。

还将ul的边距设置为0（@Danko's想法）。

在我的案例中，奇怪的ul列表问题

2 个答案: