Html 在我的情况下，如何在 <ul> <li> 选项卡上添加图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7793469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add image on my <ul> <li> tab in my case?
提问by Leem.fin
I have done a simple tab layout by using html<ul><li>with some CSS, my code example is here on jsfiddle.
HTML:
我通过使用html<ul><li>和一些CSS完成了一个简单的选项卡布局，我的代码示例在 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:
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;
}
After you looked at my code, you saw I tried to have a image on top of the text on each tab, in my current code, I only did it on the first tab, but it looks urgly, so, I start to doubt am I using a good way to do it? Could some one give some suggestions on the correct way to have a image above tab textas each tab's content based on my code ?
在您查看我的代码后，您看到我尝试在每个选项卡上的文本顶部放置一个图像，在我当前的代码中，我只在第一个选项卡上进行了操作，但它看起来很糟糕，所以，我开始怀疑是我用的好方法呢？有人可以根据我的代码就在选项卡文本上方显示图像作为每个选项卡的内容的正确方法提出一些建议吗？
P.S.What I mean urglyon my current implementation is that there is a big gap between image and text on the tab.
PS我的意思urgly我当前的实现是有选项卡上的图像和文字之间有很大差距。
采纳答案by Merianos Nikos
I prefer that solution:
我更喜欢这个解决方案：
HTML:
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:
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;
}
回答by mohana rao
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;
}
回答by Side
You wanted like this?
你想要这样？
I just made a quick example
我只是做了一个简单的例子
HTML:
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:
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;
}
(updated your code)
（更新了您的代码）
