如何将其转换为列表元素中的两列布局?

时间:2010-12-20 01:11:23

标签: html css html-lists

<ul>
<a href="/blah"><li><img src='/profile.jpg'><span>Name</span><span>Address</span></li></a>
</ul>

我希望有两列,左侧列中的图像跨越两行,右侧列中的文本位于图像右侧的上下行。

我尝试使用带有蓝图css的div但是然后锚标签以一种奇怪的方式显示 - 它似乎不包含悬停时的整个列表元素,而是包含条子。

我也尝试过使用表格布局,但因为我无法用CSS控制填充,所以它看起来很笨重。

如何在列表元素中将其转换为两列布局?

2 个答案:

答案 0 :(得分:1)

你的一些HTML无效,所以我冒昧地清理了一些HTML。这样的事情对你有用:

<ul>
    <li>
        <div>
            <span class="item-container"><a href="/blah"><img src="blah.jpg" /></a></span>
            <div class="item-container">
                <span class="item">Name</span>
                <span class="item">Address</span>
            </div>
        </div>
    </li>
</ul>

CSS:

.item {float:left; clear:left;}
.item-container {float:left;}

根据需要添加边距/填充。

工作样本:http://jsfiddle.net/andrewwhitaker/KUaCE/

答案 1 :(得分:0)

对所有元素使用float:left,也需要浮动适当的高度