在CSS中設計子彈點

-1

好吧，這可能是一個愚蠢的問題，但我對這個子彈點的造型感到生氣。我想使它看起來像這樣：在CSS中設計子彈點

- Coffee      - Milk     - Milk 
- Coffee      - Milk     - Milk 
- Coffee      - Milk     - Milk

使用這種標記

<ul> 
    <li>Coffee</li> 
    <li>Milk</li> 
    <li>Milk</li> 
</ul> 

<ul> 
    <li>Coffee</li> 
    <li>Milk</li> 
    <li>Milk</li> 
</ul> 

<ul> 
    <li>Coffee</li> 
    <li>Milk</li> 
    <li>Milk</li> 
</ul>

來源

2016-03-24 Nevershow2016

你能否詳細說明？你想讓你的子彈顯示爲A，B，C或什麼..？ –

同意加文，即使你的例子..我不知道你想要做什麼 –

對不起，這是一個廢話的例子，我希望他們像這樣顯示，所以字母等將被替換爲文字，但如果這是有道理的，那麼它們的地位如何呢？ – Nevershow2016

與此類似，使用inline-block

li { 
 
    display: inline-block; 
 
    margin: 0; 
 
    width: 30%; 
 
}

<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul>

可與flex

ul { 
 
    display: flex; 
 
} 
 
li { 
 
    width: 33%; 
 
}

<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul>

來源

2016-03-24 17:14:35 LGSon

謝謝x的幫助 – Nevershow2016

ul { 
 
    float:left; 
 
    }

<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Milk</li> 
 
</ul>

喜歡這個？

來源

2016-03-24 17:12:26

是的，再次感謝 – Nevershow2016

完成

其簡單的方法來做到這一點。

來源

2016-03-24 17:14:51

請試試這個：

li { 
    display: inline-block; 
    margin: 0; 
    width: 30%; 
} 
li:before { 
content: "-"; 
}

來源

2016-03-24 17:34:48 satya

在CSS中設計子彈點

回答

相關問題