Question

您好（在这里排序），我创建了一个页面，其中有不同的列表，我需要它们保持在彼此之下。我没有使用任何花车，所以我认为这些列表不应该相互浮动？不同的清单对于清楚地了解不同的群体是必要的。在这种情况下，不同类型的足球运动员。这是链接：

http://www.ostameerbeke.be/spelerskern.html

        <h2>Keepers</h2>
        <ul id="keepers">          
            <li><a href="DE BACKER Glenn.JPG" rel="shadowbox[spelers]"><img src="DE BACKER Glenn.JPG" width="180px" alt="speler"/></a><p>DE BACKER</p> <p>Glenn</p></li>
            <li><a href="VERPAELST_Jeroen.JPG" rel="shadowbox[spelers]"><img src="VERPAELST_Jeroen.JPG" width="180px" alt="speler"/></a><p>VERPAELST</p> <p>Jeroen</p></li>
       </ul> 

       <h2>Verdedigers</h2> 
       <ul id="verdedigers">          
            <li><a href="9.JPG" rel="shadowbox[spelers]"><img src="9.JPG" width="180px" alt="speler"/></a><p>VAN LONDERSEELE</p> <p>Bram</p></li>
            <li><a href="DU MONGH Kim.JPG" rel="shadowbox[spelers]"><img src="DU MONGH Kim.JPG" width="180px" alt="speler"/></a><p>DUMONGH</p> <p>Kim</p></li>           
       </ul>

有谁能告诉我我做错了什么？谢谢！

CSS：

#keepers {
  list-style-type: none;
  width: 1000px;
  margin: 0px auto;
  padding: 0px;
}

#keepers li { 
  float: left;
  width: 170px;
  padding: 12px;
  height: 200px;
  text-align: center;
}

#verdedigers {
  list-style-type: none;
  width: 1000px;
  margin: 0px auto;
  padding: 0px;
}

#verdedigers li { 
  float: left;
  width: 170px;
  padding: 12px;
  height: 200px;
  text-align: center;
}

Answer 1

将此添加到您的代码中这里是fiddle

ul#trainers, ul#keepers, ul#verdedigers, ul#middenvelders, ul#aanvallers
        {display:block!important; max-width:1000px; overflow-x:auto;}

不同的<ul>不会相互影响

1 个答案: