0

我正在尝试制作一个列表，每行应该包含大约 5 个图像，如果有更多，请在下面创建一个新行并开始这样做。float: left;不起作用，因为它搞砸了一切。

HTML：

<html>
<head>
<title>LolChamps - Knowledge Database</title>
<link rel="stylesheet" type="text/css" href="css/champions.css">
<link rel="stylesheet" type="text/css" href="css/css.css">
<link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>

<!-- NAVIGATION --> 
<div id="nav-bar">
    <div id="nav-bar-title">LoL Champs</div>
    <ul>
    <li><a href="champions">Champs</a></li>
    <li><a href="">Info</a></li>
    <li><a href="">Guides</a></li>
    <li><a href="">Model Viewer</a></li>
    <li><a href="">Lists</a></li>
    <li><a href="">Support</a></li>
    </ul>
</div>
<!-- END NAVIGATION -->

<div id="main-body">
<div id="nav-body-divider"></div>

<p id="home-body-title">Champions</p>

<div id="champ-list">
<ul>

<li><a href="champs/aatrox.html"><img src="images/champion-icons/aatrox.png" /><br/><div id="champ-text">Aatrox</div></a></li>
<li><a href="champs/ahri.html"><img src="images/champion-icons/ahri.png" /><br/><div id="champ-text">Ahri</div></a></li>
<li><a href="champs/akali.html"><img src="images/champion-icons/Akali.png" /><br/><div id="champ-text">Akali</div></a></li>
<li><a href="champs/alistar.html"><img src="images/champion-icons/Alistar.png" /><br/><div id="champ-text">Alistar</div></a></li>
<li><a href="champs/amumu.html"><img src="images/champion-icons/amumu.png" /><br/><div id="champ-text">Amumu</div></a></li>
<li><a href="champs/anivia.html"><img src="images/champion-icons/anivia.png" /><br/><div id="champ-text">Anivia</div></a></li>
<li><a href="champs/annie.html"><img src="images/champion-icons/annie.png" /><br/><div id="champ-text">Annie</div></a></li>

</ul>
</div>

</div>

</body>
</html>

CSS：

#champ-list {
    color: black;
    font-family: Arial;
}
#champ-list li {
    list-style-type: none;
    color: #B0B0B0;
}
#champ-list ul li {
    display: inline;
}

如您所见，我尝试过display: inline;但无济于事。这是我希望结果如何的图像：

这就是它应该是什么样子的。

4

2 回答 2

1

尝试

#champ-list ul li {
   display: inline-block;
}

您可能需要调整宽度，li使每行适合 5 个。

于 2013-10-24T22:03:12.717 回答
0

float: left可以正常工作，这可能会导致问题，因为您没有清除 float，而是使用display: inlineordisplay: inline-block是标准的，在这种情况下，您应该将li's 的宽度设置为 20%（或者可能更小，您可能需要使用它）。

于 2013-10-24T22:08:41.710 回答