html - 如何将列表样式图像与 Bootstrap 中的文本对齐

Question

我使用的是 bootstrap 4，我正在尝试将我的列表样式图像与列表样式文本对齐。

到目前为止，这是我的 html:

li.nav-item {
  color: #fff;
  margin: 15px 0px;
  list-style-image: url("../img/circle.png");
  background-repeat: no-repeat;
  list-style-position: left top;
  margin-left: 25px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active">Text here text here text here</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">Text here text here text here</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">Text here text here text here</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">Text here text here text here</a>
  </li>
</ul>

我试过使用垂直对齐，但没有用。也玩填充和边距。请帮忙!

Answer 1

我不知道 list-style-image 但你应该试试这个:

li.nav-item {
    color: #000;
    margin: 15px 0px;
    list-style: none;
    background: url(https://www.w3schools.com/cssref/sqpurple.gif) left center no-repeat;
    padding-left: 5px;
    background-repeat: no-repeat;
}