Html 是否可以将块元素包括在水平布局的未排序列表元素中_Html_Css

Html 是否可以将块元素包括在水平布局的未排序列表元素中

html css

Html 是否可以将块元素包括在水平布局的未排序列表元素中,html,css,Html,Css,我有一个项目的清单，我想被水平放置。基本上是一排带字幕的图片。差不多 picture1 picture2 picture3 caption1 caption2 caption3 所以我认为这是一个无序列表，列表元素的样式为“display:inline”。但标题必须是块元素，否则它们将按如下方式打印： picture1 caption1 picture2 caption2 ... 但当它们是块元素时，列表保持垂直： picture1 caption1 picture2 cap

我有一个项目的清单，我想被水平放置。基本上是一排带字幕的图片。差不多

picture1 picture2 picture3  
caption1 caption2 caption3

所以我认为这是一个无序列表，列表元素的样式为“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>


废话
李老师{
列表样式：无；
显示：内联；
}
.项目{
显示：内联；
}

乌诺
dos
特雷斯

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

漂浮你的LIs是一条路要走；这样，您就可以在其中包含任何内容。

您不需要

div

s。只需将

.myclass li

设置为

display:inline block

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>

我试过了，它似乎在firefox中运行，但在IE7中不起作用。好消息。我不知道这个选项。那么我猜要么你的页面将IE7置于怪癖模式，要么我忘记了一些重要的事情。；-）

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