当列表左侧有浮动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;元素应该具有相同的左开始位置。有什么想法吗?
答案 0 :(得分:0)
你好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>