HTML/CSS：自定义UL列表

-1

我有我的列表设计这样的形象：HTML/CSS：自定义UL列表

正如你所看到的文本具有一个利润率左与装饰的蓝色圆点加文字是左对齐。所以我的问题是，我如何定制ul列表，如设计，有余裕和最后的文本对齐 - 留在上面的其他文字。

P/S：这是我可以尝试做的。

ul{ 
 
    font-size: 16px; 
 
    font-weight: 400; 
 
    color: #2e3192; 
 
    margin-left: 20px; 
 
    margin-top: 17px; 
 
    list-style: square inside url("BlueDot.png"); 
 
} 
 
li{ 
 
    margin-top: 17px; 
 
}

<ul> 
 
    <li>Finance Leases</li> 
 
    <li>Operating Leases</li> 
 
    <li>Installment Sales</li> 
 
    <li>Cross-Border Leases &<br/> Leases Denominated in<br/> Local Currencies</li> 
 
</ul>

来源

2017-03-16 VMCuongOnStackOverflow

分享您的CSS和HTML – Aslam

创建[最小的，完整的，和可核查的示例]（https：//开头计算器。 com/help/mcve）与您的代码，并将其附加到您的问题。 –

添加了代码，谢谢指出。 – VMCuongOnStackOverflow

li{ 
 
margin-left:30px; 
 
text-indent:-30px; 
 
}

<li>asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb asdb </li>

来源

2017-03-16 05:11:10 blackmiaool

我更新了答案。 – blackmiaool

它与文本缩进，谢谢。 – VMCuongOnStackOverflow

ul li { 
 
    /* Bullet color */ 
 
    color: blue; 
 
    list-style-type: disc; 
 
    font-size: 16px; 
 
} 
 

 
.box { 
 
    background-color: green; 
 
    width: 200px; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
} 
 

 
h1 { 
 
    padding-left: 20px; 
 
    color: white; 
 
    font-size: 20px; 
 
}

<div class="box"> 
 
    <h1>Hello World</h1> 
 
    <ul> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    <li>This is a long string <br/> break</li> 
 
    </ul> 
 
</div>

编辑你的CSS因此，更换字体，字体大小，背景颜色，字体颜色等

来源

2017-03-16 05:16:22 Mindless

使用可以使用text-indent

li { 
 
    width: 100px; 
 
    padding: 0 20px; 
 
    text-indent: -0.88em; 
 
}

<li>text text text</li> 
 
<li>text text text text text text</li>

来源

2017-03-16 05:21:09

<ul> 
<h2> 
Leases/Installations Sales 
</h2> 
    <li>Coffee</li> 
    <li>Tea</li> 
    <li>Coca ColaCoca ColaCoca ColaCoca ColaCoca ColaCoca Cola</li> 
</ul>

而CSS是

ul{ 
    width:200px; 
    background:blue; 
    padding:5px 10px 20px 35px; 
} 
ul h2{ 
    margin-left:-15px; 
    color:#fff; 
}

提琴手链接https://jsfiddle.net/zkybhjdy/1/

来源

2017-03-16 05:34:55

你在这里

ul { 
 
    background: #469eb4; 
 
    width: 400px; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    color: #2c3d95; 
 
    position: relative; 
 
    padding-left: 20px; 
 
} 
 

 
li:after { 
 
    content: ""; 
 
    width: 5px; 
 
    height: 5px; 
 
    border-radius: 50%; 
 
    background: #2e3192; 
 
    position: absolute; 
 
    left: 0%; 
 
    top: 40%; 
 
}

<ul> 
 
    <li>Finance Leases</li> 
 
    <li>Operating Leases</li> 
 
    <li>Installment Sales</li> 
 
    <li>Cross-Border Leases &<br/> Leases Denominated in<br/> Local Currencies</li> 
 
</ul>

来源

2017-03-16 08:38:09

HTML/CSS：自定义UL列表

回答

相关问题