CSS中的用户个人资料状态

Question

我正在尝试在我的网页中实现用户个人资料状态栏。为此，我做了以下几点：

<ul style="width:250px;background-color:#F5F5F5;">
    <li style="width: 20%;background-color:#abb230;"/>
</ul>

对于此代码，我得到以下结果：

所以在这里我要移除绿色条左侧的子弹，并将绿色条向左冲洗。

我试过这样做：

<ul style="width:250px;background-color:#F5F5F5;list-style:none;">
    <li style="width: 20%;background-color:#abb230;"/>
</ul>

但这会使整个<ul>元素消失。

Answer 1

尝试：

ul {
    width: 250px;
    background-color: #F5F5F5;
    list-style-type: none;
    padding: 0;
}
li {
    width: 20%;
    background-color: #abb230;
    height: 20px;
}

DEMO here.

Answer 2

ul
{
    list-style-type: none;
    list-style-position:inside;
    margin:0;
    padding:0;
}

这会对你有所帮助

Answer 3

在“ul”上有以下样式。

list-style:none;

快速指针。避免这么多内联样式。将结构逻辑与结构分开