Можно ли включать элементы блока в неупорядоченные элементы списка, расположенные горизонтально - PullRequest
Новая
       12

Можно ли включать элементы блока в неупорядоченные элементы списка, расположенные горизонтально

0 голосов
/ 01 апреля 2009

У меня есть список предметов, которые я хочу выложить по горизонтали. Это в основном ряд картинок с подписями. Что-то вроде 

picture1 picture2 picture3  
caption1 caption2 caption3

Итак, я подумал, что это неупорядоченный список с элементами List, стилизованными под «display: inline». Но подписи должны быть блочными элементами, иначе они печатаются в строке следующим образом: 

picture1 caption1 picture2 caption2 ...

Но когда они являются блочными элементами, список остается вертикальным: 

picture1  
caption1  
picture2  
caption2  
picture3  
caption3

Нужно ли использовать плавающие div вместо списка в этом случае? Какой лучший способ сделать эту работу?

Ниже приведен полный пример использования div вместо изображений. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Blah</title>
<style type="text/css">

.myclass li{
  list-style: none;
  display: inline;
}
.item{
  display: inline;
}

</style>
</head>
<body>

<div class="myclass">
  <ul>
    <li><div class="item"><a href="http://google.com">one</a><p>uno</p></div></li>
    <li><div class="item"><a href="http://google.com">two</a><p>dos</p></div></li>
    <li><div class="item"><a href="http://google.com">three</a><p>tres</p></div></li>
  </ul>
</div>

</body>  
</html>

Ответы [ 3 ]

0 голосов
/ 01 апреля 2009

Вам не нужны div с. Просто установите .myclass li на display: inline-block.

0 голосов
/ 02 апреля 2009

Div в элементах li избыточны. Вот самый простой способ сделать это:

HTML: 

<ul id="captions">
   <li><a href="#"><img /></a><p>Caption here</p></li>
   <li><a href="#"><img /></a><p>Caption here</p></li>
   <li><a href="#"><img /></a><p>Caption here</p></li>
   <li><a href="#"><img /></a><p>Caption here</p></li>
</ul>

CSS: 

#captions {
   list-style:none;
   margin:0;
   padding:0;
}
#captions li {
   list-style:none;
   margin:0;
   padding:0;
   width:200px;
   height:220px;
   float:left;
   text-align:center;
}
0 голосов
/ 01 апреля 2009

Всякий раз, когда у вас есть элемент уровня блока, весь макет сдвигается вниз, даже если его контейнер отображается встроенным.

Плавание ваших LI - это путь; таким образом, вы можете иметь любой контент внутри них.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...