Question

我不熟悉CSS，使用bootstrap＆amp;现在我想在

之前设置一个图标，我想创建一个关于投注的“博客”，所以我必须添加运动类型，所以我选择使用图标列表

所以我试着这样做只是因为你可以看到它不好，列表应该是1行，而不是2，图标也应该在左边

我试图处理“：之前”但没有成功，我也想要一个好方法，让我用PHP动态更改图标（通过更新列表）

制作它的最佳方法是什么？谢谢

Answer 1

Flexbox是最近调整事物的方式。这可能有助于您入门：

＆＃13;

ul {list-style:none;}
li {display:flex;align-items: center;}
img {margin-right:10px;}

＆＃13;

<ul>
  <li><img src="http://placekitten.com/49/51" />  John Doe</li>
  <li><img src="http://placekitten.com/50/50" /> Peter Rabbit</li>
</ul>

＆＃13;

参考文献：

Answer 2

这是另一种方式：

＆＃13;

ul {
  list-style: none
}
li {
  position: relative;
  background: url(//dummyimage.com/10x10) no-repeat center left;
  padding-left : 20px;
}

＆＃13;

<ul>
  <li>John Doe</li>
  <li>Peter Rabbit</li>
</ul>

＆＃13;