Question

我想有一个菜单列表，用于网站导航，其中一些菜单项包含文本和文本右侧的图像：

<ul>
  <li>Nav item 1</li>
  <li>Nav item 2 <img src="image.gif" /></li>
</ul>

我希望包含图像的菜单项以正确的水平对齐方式文本[空格]图像。

任何人都可以通过向我展示可以实现此目标的CSS来提供帮助吗？

Answer 1

ul li img {
padding-left: 20px;
}

Answer 2

这是你在谈论什么？ http://jsfiddle.net/brandondurham/gvqGk/

<强> HTML

<ul>
    <li>
     This is the LI text. <img src="http://dropbox.smallparade.com/bigbubble.png" width="24" height="24">
    </li>
</ul>

<强> CSS

ul li {
    font: 14px/24px Helvetica, Arial, sans-serif;
    white-space: nowrap;
}
ul li img {
    margin-left: 10px;
    vertical-align: middle;
}

Answer 3

我会受到诱惑，因为这是导航，将它全部包装在锚中并将其分类为特定图像作为该入级锚的背景。

这样的事情：

<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*/
}

在UL LI导航菜单列表中使用IMG

3 个答案: