Question

我有一个无序的项目列表，其中每个项目是一个图像，后跟一些文本。我希望文本准确排列，但由于图标的大小略有不同，每个文本的文本都没有对齐。请参阅下面的JSFiddle以获取示例。你可以看到＆＃34; O＆＃34;选项在左边比在＆＃34; R＆＃34; RSS feed。

实现这一目标的最简单方法是什么？有没有办法在不改变图像的情况下这样做？

这是我的HTML：

<ul class="dropdown-menu">
  <li><a id="login" style="cursor:pointer;"><img src="http://www.w3schools.com/images/up.gif" /> Login</a></li>
  <li><a id="upload" style="cursor:pointer;"><img src="http://static.bbci.co.uk/id/0.23.4/img/bbcid_orb_signin_dark.png" /> Upload a file</a></li>
  <li><a id="option 3" style="cursor:pointer;"><img src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/4f6cbd09-148c-4dd8-b1f2-48f232a2fd33_818.jpg"/>Option 3</a></li>
  <li><a id="rss" id="rss" ><img src="http://www.w3schools.com/images/up.gif" /> RSS Feed</a></li>
  <li><a id="about" style="cursor:pointer;"><img src="https://www.google.com/images/icons/product/googlemail-16.png" /> About</a></li>
</ul>

这里有一个JSFiddle：

http://jsfiddle.net/9f1gxLv6/

谢谢，

菲尔

Answer 1

如果您希望将图标和文本均匀地水平放置，我建议将图像用作背景而不是内联，然后添加一些填充：

＆＃13;

#login {
    background-image: url('http://www.w3schools.com/images/up.gif');
}
#upload {
    background-image: url('http://static.bbci.co.uk/id/0.23.4/img/bbcid_orb_signin_dark.png');
}
#option_3 {
    background-image: url('http://res2.windows.microsoft.com/resbox/en/windows%207/main/4f6cbd09-148c-4dd8-b1f2-48f232a2fd33_818.jpg');
}
#rss {
    background-image: url('http://www.w3schools.com/images/up.gif');
}
#about {
    background-image: url('https://www.google.com/images/icons/product/googlemail-16.png');
}
a {
    display:inline-block;
    padding: 2px 0 2px 30px;
    background-repeat:no-repeat;
    background-position: left center;
}

＆＃13;

<ul class="dropdown-menu">
    <li><a id="login" style="cursor:pointer;">Login</a>

    </li>
    <li><a id="upload" style="cursor:pointer;">Upload a file</a>

    </li>
    <li><a id="option_3" style="cursor:pointer;">Option 3</a>

    </li>
    <li><a id="rss" id="rss">RSS Feed</a>

    </li>
    <li><a id="about" style="cursor:pointer;">About</a>

    </li>
</ul>

＆＃13;

如何在无序的图像列表中排列文本

1 个答案: