HTML列表中的圖像-不縮進文本

Question

遇到以下代碼將圖像放置在列表項的左側，但是我需要在每個列表中使用不同的圖像，也不希望該圖像影響文本布局。

在每個列表項中，文本的后面還是前面都有浮動圖像？

我嘗試了幾段代碼，它們似乎弄亂了列表的文本布局，並完全破壞了移動設備。

<html>
<head>
<style>
ul {
  list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<h1>The list-style-image Property</h1>

<p>The list-style-image property replaces the list-item marker with an image:</p>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Answer 1

您將要使用類，例如.list-one等。

ul.list-one {
  list-style-image: url('sqpurple.gif');
}
...
<ul class="list-one">
...

然后為每個列表重復一個list-two二類，以此類推。

工作CodePen： https ://codepen.io/mlillie87/pen/VwZaVwj

HTML列表中的圖像-不縮進文本

問題描述

1 個解決方案

解決方案1
0 2019-08-15 22:56:14

HTML列表中的圖像-不縮進文本

問題描述

1 個解決方案

解決方案1 0 2019-08-15 22:56:14

解決方案1
0 2019-08-15 22:56:14