같은 줄에 목록 보관하기

나는 한 줄에 약 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 : 당신은 내가 display: inline;을 시도했지만 아무 소용에 한 알 수 있듯이

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

. 여기에 나는 그것을 밖으로 설정해야합니다 바라고 있어요 방법의 이미지는 다음과 같습니다

This si what it should sort of look like.

출처

2013-10-24 Nick Robertson

당신은 라인 당 li 그래서 5 적합의 폭을 조정해야 할 수 있습니다

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

을보십시오.

출처

2013-10-24 22:03:12 Trevor

float: left 잘 작동 것이다 당신은 당신이하지 clearing your floats이기 때문에, 아마 문제의 원인,하지만 당신은 덜 가능성이 20 %에 li 년대의 폭을 설정 (또는해야하는 경우, display: inline 또는 display: inline-block은 표준 사용 그것을 가지고 놀 필요가있을 수 있음).

출처

2013-10-24 22:08:41

답변

관련 문제