CSS не выстраивается.Может быть, проблема цикла - PullRequest
Новая
       6

CSS не выстраивается.Может быть, проблема цикла

0 голосов
/ 26 августа 2011

Я работал над сайтом и попал в затруднительное положение.
У меня есть разные li внутри одного ul.
Я бы хотел, чтобы каждый li был центрирован, а не перекрывался какони сейчас.Надеюсь, что изменение ширины li позволит мне выбрать, сколько у меня будет строк.В настоящее время должно подойти 4.
Я использую плагин цикла , но я просмотрел FAQ и не могу найти ничего, что описывает мою проблему (я думаю).
Вотчасть кода: 

<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/
Спасибо за ваше время, я надеюсь, что я не просто глупыйи не видеть прямо>. <</p>

Ответы [ 2 ]

1 голос
/ 26 августа 2011

сделать float:left в вашем li и сделать ширину для li, также иметь overflow:hidden для ul

0 голосов
/ 26 августа 2011

Я не совсем уверен, что вы имеете в виду, но, учитывая, что вы используете inline-block Я собираюсь предположить, что вы получаете дополнительный пробел, и вы не уверены, откуда он.

Если вы используете inline-block, сжатые пробелы сохраняются между элементами, поэтому вам нужно убедиться, что между начальными и конечными тегами нет пробелов (</li> и * 1006).*).Количество строк также учитывается.

Кроме того, если вы хотите, чтобы все ваши элементы центрировались, вам нужно объявить text-align center по элементу ul.

Вот скрипкас демонстрацией того, о чем я говорю .

...