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列表

回答

相關問題