CSS 在 UL LI 导航菜单列表中使用 IMG
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4326546/
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
Use of IMG within a UL LI navigation menu list
提问by JRenney
I would like to have a menu list, used in a website navigation, where some of the menu items contain both text and an image to the right of the text:
我想要一个菜单列表，用于网站导航，其中一些菜单项同时包含文本和文本右侧的图像：
<ul>
<li>Nav item 1</li>
<li>Nav item 2 <img src="image.gif" /></li>
</ul>
I'd like the menu items containing the image to be Text[space]Imagein correct horizontal alignment.
我希望包含图像的菜单项是Text[space]Image以正确的水平对齐方式。
Can anyone help by showing me the CSS that would achieve this?
任何人都可以通过向我展示可以实现这一目标的 CSS 来帮助我吗？
回答by benhowdle89
ul li img {
padding-left: 20px;
}
回答by Brandon Durham
This what you're talking about? http://jsfiddle.net/brandondurham/gvqGk/
这是你在说什么？http://jsfiddle.net/brandondurham/gvqGk/
HTML
HTML
<ul>
<li>
This is the LI text. <img src="http://dropbox.smallparade.com/bigbubble.png" width="24" height="24">
</li>
</ul>
CSS
CSS
ul li {
font: 14px/24px Helvetica, Arial, sans-serif;
white-space: nowrap;
}
ul li img {
margin-left: 10px;
vertical-align: middle;
}
回答by jimplode
I would be tempted as this is navigation, to wrap it all in an anchor and class it for a specific image as a background for that classed anchor.
我会很想，因为这是导航，将其全部包装在一个锚点中，并将其分类为特定图像作为该分类锚点的背景。
Something like this:
像这样的东西：
<ul>
<li><a href="" class="imagedClass">Link 1</a></li>
<li><a href="">Link 2</a></li>
</ul>
a.imagedClass
{
display:inline-block;
width:200px;
background-image:url('/images/image.png');
padding-right:20px;/*width of image*/
}
