2011-08-26 5 views
0

저는 사이트에서 일해 왔고 걸려 들었습니다.
나는 여러 개의 리가 하나의 ul 안에있다.
저는 각각의 리가 중심에 놓 이도록하고 싶습니다. 다행스럽게도 리의 너비를 키워 나가면 행당 얼마나 많은 지 선택할 수 있습니다. 현재 4 개가 적합해야합니다.
cycle plugin을 사용하고 있지만 FAQ를 살펴본 결과 내 문제를 설명하는 항목을 찾을 수 없습니다 (필자 생각).
다음은 코드의 일부입니다 :CSS li 줄이 보이지 않습니다. 사이클 문제 일 수도 있습니다

<ul> 
<li> 
<a href="./portrait.php"> 
<h2>Portrait</h2><br /> 
<div class="slideshow"> 
<img src="./photos/Abstracted Portrait Study One_Thmb.png"> 
<img src="./photos/Angelic_Thmb.png"> 
</div> 
</a> 
</li> 

<li> 
<a href="./stilllife.php"> 
<h2>Still Life</h2><br /> 
<div class="slideshow"> 
<img src="./photos/Composition Study One_Thmb.png"> 
<img src="./photos/Composition Study Two_Thmb.png"> 
<img src="./photos/Composition Study Three_Thmb.png"> 
<img src="./photos/Light Bulb Study One_Thmb.png"> 
</div> 
</a> 
</li> 

[...] 

</ul> 

CSS :

#portfoliotextarea li{ 
width: 200px; 
text-align: center; 
display: inline-block; 
margin-left: auto; 
margin-right: auto; 
} 

그리고 URL : http://www.duffydesigns.co.uk/portfolio/gallery/
이 당신의 시간을 주셔서 감사합니다, 난 그냥 바보되는 및 표시되지 아니에요 희망 똑바로>. 또한 내가 당신을 참조하는지 완전히 확실하지 않다,하지만 당신은 inline-block 내가 '사용하고 주어진 UL

답변

1

여분의 여백이 생기고 그것이 어디에서 왔는지 확신 할 수 없다고 가정합니다.

inline-block을 사용하는 경우 요소 사이에 압축 된 공백이 있으므로 시작 태그와 종료 태그 사이에 공백 문자가 없는지 확인해야합니다 (</li><li>). 줄 바꿈도 마찬가지로 중요합니다.

또한 모든 요소를 ​​가운데 맞추려면 text-align을 중심으로 ul 요소에 선언해야합니다.

Here is a fiddle with a demo of what I'm talking about.

+2

그는 이미'li' 너비를 지정했습니다. 그는 그냥 떠날 필요가 있습니다. ul 뒤에 'clear : both;'가있는 요소를 사용하여 플로트를 지우는 것을 잊지 마십시오. – mrtsherman

+0

만약 내가 위를 잘못했을 지 확신 할 수 없지만, 위에서 HEIGHT (나는 이미 너비를 가졌다)로 모든 것을 잘 해냈다. 고마워요! :) –

0

에 대한 overflow:hidden을 가지고, 당신 리에서 float:left을하고 리튬의 폭을 <

관련 문제