Question

当列表左侧有浮动div时，我无法找到解决列表缩进问题的方法。我想使用'list-style-position：outside'但是这个out side indent与left div重叠，如果使用'list-style-position：inside'，第二行的文本对齐将不会与第一行一致。以下是我的代码：

<html>
<head>
<title>List Problem</title>
<style type="text/css">
</style></head>
<body>
<div style="width:400px">
<div style="float:left; width:200px; height:40px; background-color:red;">
</div>
<div style="margin-left:20px">
<ul>
<li>One</li>
<li>Two separated into two lines</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
</div> 
</body>
</html>

我无法上传图片，但如果您从浏览器查看上述代码，则可以了解我的意思。我想让列表点不被红色框覆盖，并且项目Three，Four和Five对齐，因为它们现在已对齐。还有一行的多行＆lt;李＆GT;元素应该具有相同的左开始位置。有什么想法吗？

Answer 1

你好nemozhp你的意思是红色背景中的列表吗？

<html>
<head>
<title>List Problem</title>
<style type="text/css"></style>
</head>
<body>
<div style="">
    <div style="width: 200px; background-color: red;">

    <ul style="padding: 0pt; margin: 0pt; list-style: none outside none;">
    <li>One</li>
    <li>Two separated into two lines</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    </ul>

    </div>
</div>

</body>
</html>

如何正确对齐列表缩进与左侧的浮动div？

1 个答案: