gpt4 book ai didi

html - 我如何在 float 的 img 周围流动 ul

转载 作者:太空宇宙 更新时间:2023-11-04 13:25:11 26 4
gpt4 key购买 nike

我有一个 img float 到左侧,然后是一个长 ul,它应该呈现在 img 的右侧,然后继续在它下面。它这样做了,但是 ul 紧挨着 img 的部分全部左对齐并失去了缩进。

这是一个最小的例子。 (也在 jsbin 中)

<html>
<head>
</head>
<body>
<div style="float:left"><img src="http://i410.photobucket.com/albums/pp190/FindStuff2/Photography/Winter/winter.jpg" width="200" height="150" /></div>
<ul>
<li>Level 1</li>
<li>Level 1</li>
<li>
<ul>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2</li>
</ul>
</li>

<li>Level 1</li>
<li>Level 1</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
<div style="clear:both"><!-- --></div>
More content More content More content More content More content More content More content More content More content More content More content
</body>
</html>

感谢您的帮助。

最佳答案

试试这个:

/* add some margin-right for some white space between the list and image */
div {margin-right:12px; float:left;}

/* add overflow and set the list-style attributes */
li {overflow:hidden; list-style:inside square none;}

关于html - 我如何在 float 的 img 周围流动 ul,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9160549/

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