不同的<ul>不要站在一起

Question

你好（这里有点新人），我制作了一个页面，其中有不同的列表，我需要它们彼此保持一致。我没有使用任何浮动，所以我认为列表不应该彼此相邻浮动？不同的列表对于清楚地了解不同的组是必要的。在这种情况下，不同类型的足球运动员。这是 link:

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>不要站在一起

Different <ul> don't stand under eachother

html

css

list

html-lists

css-float