gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 15:03:50 27 4
gpt4 key购买 nike

我有一个要水平放置的元素列表。它基本上是一排带标题的图片。有点像

picture1 picture2 picture3  
caption1 caption2 caption3

所以我认为这是一个无序列表,其中 List 元素的样式为“display: inline”。但是标题必须是 block 元素,否则它们会像这样排成一行:

picture1 caption1 picture2 caption2 ...

但是当它们是 block 元素时,列表保持垂直:

picture1  
caption1
picture2
caption2
picture3
caption3

在这种情况下我需要使用 float 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>

最佳答案

只要你有一个 block 级元素,所有的布局都会向下移动,即使它的容器是内联显示的。

float 您的 LI 是可行的方法;这样你就可以在其中包含任何内容。

关于html - 是否可以在水平布局的无序列表元素中包含 block 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/706967/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com