如何在我的 <ul> <li> 标签中添加图片？

Question

如何在我的 <ul> <li> 标签中添加图片？

3

我使用了一些CSS，通过使用 <ul><li> 标签来创建一个简单的选项卡布局，这是我的 jsfiddle 代码示例。

<div>
    <ul>
        <li><a href="#"><img src="http://www.sizzledcore.com/wp-content/themes/SizzledCore-7.0/images/facebook.png" alt="Icon" /></image></br>One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">three</a></li>
    </ul>
</div>

CSS（层叠样式表）：

li{
   float: left;
}

a{

  color: #ffffff;
  background-color: #003300;

  padding-right: 32px;
  padding-left: 32px;
  display: block;
  line-height: 50px;
  text-decoration: none; 

}

a:hover {
  color: #ffffff;
  background-color: #990000;
}

在查看了我的代码之后，您看到我试图在每个选项卡的文本上方放置一张图片。在我的当前代码中，我只在第一个选项卡上实现了这个功能，但它看起来很丑陋，所以，我开始怀疑是否使用了正确的方法？有人能否提供一些关于如何根据我的代码将图像放在每个选项卡的内容上方的建议吗？

P.S. 我所说的“丑陋”是指在选项卡上的图像和文本之间有很大的间隔。

- Leem.fin

1

你到底需要什么？也许可以将图像附加到li背景中。 - Ya Zhuang

@ bitsMix，谢谢您的回复。实际上我不知道该怎么做，这就是为什么我在这里发帖问问题的原因，因为我是CSS的新手，我尝试了一些东西，但不确定我是否正确。我正在寻找更好的方法。 - Leem.fin

3个回答

0

    li{
   float: left;


}

a{ 
  width:60px; 

  color: #ffffff;
  background-color: #003300;

  padding-right: 32px;
  padding-left: 32px;
  display: block;
  line-height: 50px;
  text-decoration: none;

  text-align:center;
}

a:hover {
  color: #ffffff;
  background-color: #990000;
}

- mohana rao

0

你想要这样吗？

我只是做了一个快速的例子。

http://jsfiddle.net/Pq7LC/18/

HTML：

<div>
    <ul>
        <li><a href="#"><span class='face'>One</span></a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">three</a></li>
    </ul>
</div>

CSS：

li{
   float: left;
}

li a {

  color: #ffffff;
  background-color: #003300;

  padding-right: 32px;
  padding-left: 32px;
  display: block;
  line-height: 60px;
  text-decoration: none; 

}

a:hover {
  color: #ffffff;
  background-color: #990000;
}

.face {
        background: url("http://www.sizzledcore.com/wp-content/themes/SizzledCore-7.0/images/facebook.png") no-repeat 0px -3px;
    display: block;
}

（已更新您的代码）

- Side

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- KodeFor.Me · Accepted Answer

我更喜欢这个解决方案：

HTML:

```html

http://jsfiddle.net/Pq7LC/13/

```

<div>
    <ul>
        <li class="facebook"><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">three</a></li>
    </ul>
</div>

CSS：

li
{
    float: left;
    background-color: #003300;
}

li:hover
{
    background-color: #990000;
}

a
{         
    color: #ffffff;
    padding: 35px 32px 7px;
    display: block;
    text-decoration: none;
}

a:hover
{
    color: #ffffff;
}

.facebook
{
    background-image: url('http://www.sizzledcore.com/wp-content/themes/SizzledCore-7.0/images/facebook.png');
    background-repeat: no-repeat;
    background-position: 50% 10px;
}