Question

我有一个我想要横向布置的项目列表。它基本上是一排带有字幕的图片。像

这样的东西

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>

Answer 1

每当你有一个块级元素时，所有布局都会向下移动，即使它的容器是内联显示的。

浮动你的LI是要走的路;这样你就可以拥有任何内容。

Answer 2

您不需要div。只需将.myclass li设置为display: inline-block。

Answer 3

li元素中的div是多余的。这是最简单的方法：

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;
}

是否可以在水平布局的无序列表元素中包含块元素

3 个答案: