Question

我使用 html <ul><li>和一些 CSS ，my code example is here on jsfiddle完成了一个简单的标签布局。 HTML：

<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。我的意思 urgly 在我当前的实现中，标签上的图片和文字之间存在很大差距。

Answer 1

我更喜欢这个解决方案：

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

HTML：

<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;
}

Answer 2

    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;
}

Answer 3

你想要这样吗？

我刚刚做了一个简单的例子

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;
}

（更新了您的代码）

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

3 个答案: