Question

我必须用Image和anchor标签编写HTML。图像的大小不相等。我需要做的是将链接文本“See Projects”对齐到右侧，以便它们位于同一垂直水平/线上。这是我的代码。

<div>
<ul>
  <li><img src="images/layout/nokia.gif" /><a href="#">See projects</a></li>
  <li><img src="images/layout/kpn.gif" /><a href="#">See projects</a></li>
  <li><img src="images/layout/sla.gif" /><a href="#">See projects</a></li>
</ul>
</div>

所有图像都在左侧（长度不相等）。我想在同一垂直层面上显示链接'See Projects'。我能做什么？什么是最好的方式？

以下是JsFiddle http://jsfiddle.net/chhantyal/F9TA5/1/

上的代码

Answer 1

在CSS中尝试以下代码

ul li
{
    width:300px;
}
ul li a
{
    float:right;
}

Answer 2

更新小提琴： http://jsfiddle.net/chhantyal/F9TA5/1/

img {
    width: 50px; */ for testing */
    height: 50px; */ for testing */
    border: 1px solid #ddd; */ for testing */
    display: block;
    float: left;
}
li {
    width: 300px;
    clear: both;
}
a {
    float: right;
    padding: 18px 0 0 0; */ Adjust this to make anchors line up vertically
}

Answer 3

尝试将"float: right;"样式添加到锚标记

Answer 4

您会使用vertical-align（bottom - ＆gt; middle或top或num％）

li img, li a{ vertical-align:bottom }

图像和锚点，如何应用对齐链接文本？

4 个答案: