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

时间:2012-01-14 06:10:56

标签: css

当列表左侧有浮动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;元素应该具有相同的左开始位置。有什么想法吗?

1 个答案:

答案 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>