<ul>
<a href="/blah"><li><img src='/profile.jpg'><span>Name</span><span>Address</span></li></a>
</ul>
我希望有两列,左侧列中的图像跨越两行,右侧列中的文本位于图像右侧的上下行。
我尝试使用带有蓝图css的div但是然后锚标签以一种奇怪的方式显示 - 它似乎不包含悬停时的整个列表元素,而是包含条子。
我也尝试过使用表格布局,但因为我无法用CSS控制填充,所以它看起来很笨重。
如何在列表元素中将其转换为两列布局?
答案 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;}
根据需要添加边距/填充。
答案 1 :(得分:0)
对所有元素使用float:left
,也需要浮动适当的高度