Question

我有一组存储在无序列表中的链接。每个列表项内部是：

围绕
左侧的图片
图片旁边的一些文字
要继续的文字旁边的箭头

文本可以是任意长度，这意味着整个链接可以是任何高度。更重要的是，整个链接的宽度必须是100％（它适用于手机，因此可能是纵向/横向）。

为了确保我不需要设置宽度，我试图避免不必要的容器，只需将图像设置为垂直对齐。问题在于，如果我的文字太长，它会包裹但显示在图像下方（理所当然希望它不会），请参见此处：http://jsfiddle.net/mP2fr/9/（您可能需要调整浏览器窗口的大小以查看效果）。我的解决方案是将文本放在一个并设置为内联块，但这些默认宽度为100％，将其推到图像下方。我可以设置一个宽度，使其返回内联（并允许多行），但这涉及设置宽度，请参见此处：http://jsfiddle.net/mP2fr/7/

HTML 1：

<ul>
    <li>
        <a href="#">

            <img src="http://www.mtlettings.co.uk/images/uploads/properties/191-9163_IMG_thumb.JPG" width="400" />

            hello world asd ad asdasdg
        </a>
    </li>
</ul>

CSS 1：

li {
    background: red;
}

a {
    padding-right: 50px;
    display: block;
    background: url('http://www.perfectgetaways.co.uk/admin/system/preview/img_thumb_29706_125x125') no-repeat right center;
}

a img {
    display: inline-block;
    vertical-align: middle;
}

HTML 2：

<ul>
    <li>
        <a href="#">

            <img src="http://www.mtlettings.co.uk/images/uploads/properties/191-9163_IMG_thumb.JPG" width="400" />

            <span>
                hello world asd ad asdasdg
            </span>
        </a>
    </li>
</ul>

CSS 2：

li {
    background: red;
}

a {
    padding-right: 50px;
    display: block;
    background: url('http://www.perfectgetaways.co.uk/admin/system/preview/img_thumb_29706_125x125') no-repeat right center;
}

a img {
    display: inline-block;
    vertical-align: middle;
}

a span {
    display: inline-block;
    vertical-align: middle;
    width: 160px;
    background: aqua;
}

Answer 1

得到一个解决方案，受到Anagio的一个评论的启发。涉及将img和span设置为表格单元格，将外部标签显示为显示为表格。这样可以并排放置东西，并允许span标签中的文本向下按下多行。不是很好的IE支持，因为它打破IE8以下，但对于我的特定情况，这是一个移动应用程序，我很满意。这是最终代码：http://jsfiddle.net/chricholson/xW3qr/2/

HTML：

<ul>
    <li>
        <a href="#">

            <img src="http://www.mtlettings.co.uk/images/uploads/properties/191-9163_IMG_thumb.JPG" />

            <span>
                hello world asd ad asdasdg asdf asdf asdf asdfasdf 
            </span>
        </a>
    </li>
</ul>

CSS：

li {
    background: red url('http://www.perfectgetaways.co.uk/admin/system/preview/img_thumb_29706_125x125') no-repeat right center;
}

a {
    display: table;
}

a img {
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    width: 300px;
}

a span {
    padding-right: 60px;
    display: table-cell;
    vertical-align: middle;
}

包含文本的内联元素，虽然没有浮动，但是垂直对齐

1 个答案: