列出网页中的图像

Question

我正在尝试在我的网页中获取一个列表，以便列表中的每个项目前面都有一个图标。经过大量的试验，我发现最好的方法是使用css。因此我使用的CSS如下。

ul#interest
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

li#interest_list
{
    background-image: url('../images/icons/lab.png');
    background-repeat: no-repeat;
    padding-bottom: 10px;
}

相应的html是：

<h2>Interests</h2>
<hr class="styled-two"/>
<ul id="interest">
    <li id="interest_list">Cricket</li>
    <li id="interest_list">Football</li>
    <li id="interest_list">Table Tennis</li>
    <li id="interest_list">Voleyball and Hockey</li>
</ul>

我得到以下输出：

如你所见。所有文本都被推到页面的最右侧。 我可以在图标附近找到它的唯一方法是右边添加填充：

li#interest_list
{
    background-image: url('../images/icons/lab.png');
    background-repeat: no-repeat;
    /*background-position: 100% .4em;*/
    padding-right: 185px;
    padding-bottom: 10px;
}

这使它看起来像这样：

我该如何解决这个问题？

Answer 1

首先，您应该将li项目更改为具有类名而不是ID。你不应该多次使用相同的ID。

<li class="interest_list">

然后在你的css中：

li.interest_list

或者如果你不想重复自己：

<ul id="interest">
  <li>Cricket</li>
  ...
</ul>

css选择器变为：

#interest li { ... }

就你的间距而言，这是因为你在ul上指定了text-align：right属性。拿走我们的文字将不再被推到右侧。您将要在li元素的左侧添加一些填充，以使文本不与图标重叠：

#interest li {
  background: url('../images/icons/lab.png') no-repeat left center;
  padding: 0 0 10px 30px;
}

Answer 2

li#interest_list {
    background-image: url("../images/icons/lab.png");
    background-repeat: no-repeat;
    padding-bottom: 10px;
    width: 400px;
}

这是真的吗？

如你所愿，删除填充权限。

Answer 3

css导致文本向右对齐。改为在li对象上使用padding-left。此外，＃id选择器只能用于引用单个对象。多个项目应使用.class选择器。

更新了CSS：

ul#interest
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li.interest_list
{
    background-image: url('../images/icons/lab.png');
    background-repeat: no-repeat;
    padding-bottom: 10px;
    padding-left: 20px
}

更新了HTML：

<h2>Interests</h2>
<hr class="styled-two"/>
<ul id="interest">
    <li class="interest_list">Cricket</li>
    <li class="interest_list">Football</li>
    <li class="interest_list">Table Tennis</li>
    <li class="interest_list">Voleyball and Hockey</li>
</ul>