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

【问题标题】：How to make indentation in html ul li tag如何在 html ul li 标签中进行缩进
【发布时间】：2012-02-07 19:22:49
【问题描述】：

我有一个无序列表，其中包含项目符号文本。我需要缩进列表项。但是，对于长时间运行的文本，该样式无法按预期工作。我应该让它在边框内对齐。这是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>

JS Fiddle 链接：http://jsfiddle.net/jHJXq/

【问题讨论】：

标签： html css html-lists

【解决方案1】：

这就是你要找的吗？ 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;
}

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

【讨论】：

【解决方案2】：

给LI添加样式：

li {
   margin-left:15px;  
}

【讨论】：

【解决方案3】：

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

list-style: disc outside none;

【讨论】：

【解决方案4】：

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

li{
    margin-left:10px;
}

【讨论】：