如何在html ul li标签中进行缩进

时间:2012-02-07 19:22:50

标签: html css html-lists

我有无序列表,其中包含项目符号。我需要在列表中缩进列表项。但是对于长时间运行的文本,样式不能按预期工作。我应该在边框内对齐它。这是css代码

ul{
    background-color: #FFFFFF;
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
    list-style: disc inside none;
    padding: 10px;
}

以下是HTML示例

<div style="padding:20px">
    <ul>
        <li>Should be minimum of 8 characters</li>
        <li>A long running text A long running text A long running text A long running text A long running text</li>
        <li>Should have at least one number</li>
    </ul>
</div>

enter image description here

JS小提琴链接:http://jsfiddle.net/jHJXq/

4 个答案:

答案 0 :(得分:19)

这是你在找什么? http://jsfiddle.net/jHJXq/3/

ul{
    background-color: #FFFFFF;
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
    list-style: disc outside none;
    padding: 10px 10px 10px 25px;
}

我将列表样式更改为“outside”,并在左侧添加了一些额外的填充。

enter image description here

答案 1 :(得分:5)

将样式添加到LI

li {
   margin-left:15px;  
}

答案 2 :(得分:2)

将列表样式从内部更改为外部

list-style: disc outside none;

答案 3 :(得分:1)

ul{
    background-color: #FFFFFF;
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
    list-style: disc;
    padding:10px;
}

li{
    margin-left:10px;
}