1

我想并排放置两个子无序列表。他们有类名 L 和 R

这是 HTML 标记的相关部分。

<ul class="SearchResult">
<li class="Pagination">
<a id="lnkPageNumber_top_1" class="ACTIVE" onclick="ShowPage(this.id);" style="cursor: pointer;">1</a>
<a id="lnkPageNumber_top_2" onclick="ShowPage(this.id);" style="cursor: pointer;">2</a>
</li>
<li>
<ul class="L">
<li style="border: medium none ;">
</li>
<li class="Pagination">
<a id="lnkImagePageNumber_1" class="ACTIVE" onclick="ShowImage(this.id);" style="cursor: pointer;">1</a>
<a id="lnkImagePageNumber_2" onclick="ShowImage(this.id);" style="cursor: pointer;">2</a>
<a id="lnkImagePageNumber_3" onclick="ShowImage(this.id);" style="cursor: pointer;">3</a>
<a id="lnkImagePageNumber_4" onclick="ShowImage(this.id);" style="cursor: pointer;">4</a>
</li>
</ul>
<ul class="R">
<li class="T">Rose Villa</li>
<li>
<span>
<strong>Price</strong>
: Rs. 2,000,000
</span>
</li>
<li>
<strong>Features</strong>
:
<img height="16" width="16" src="bed.png" alt="Beds:" title="Bedrooms"/>
3
<img height="16" width="16" src="bath.png" alt="Baths:" title="Bathrooms"/>
3
</li>
</ul>
</li>
</ul>

应用的样式表是这个

ul.SearchResult { width:100%; list-style:none; }
ul.SearchResult li { margin:2px; height:200px; border:solid 1px #B5D335;clear:left; }
ul.SearchResult img { padding:0px; margin:0px; width:235px; height:156px; border:none }
ul.SearchResult li.Pagination { padding:5px; height:auto; }
ul.SearchResult li.Pagination a { color:#669900; font-weight:bold; }
ul.SearchResult li.Pagination a:hover { color:#FF9900; }
ul.SearchResult li.Pagination a.ACTIVE { color:#FF9900; border:solid 1px #B5D335; padding-left:3px; padding-right:3px; }
ul.SearchResult li ul {float:left; list-style:none; }
ul.SearchResult li ul.L { width:245px;} /* Set as Television set BG */
ul.SearchResult li ul.R { width:292px;}
ul.SearchResult li ul li { padding:3px; border:none; height:auto; border-bottom:dotted 1px #C9C9C9; }
ul.SearchResult li ul li.T { text-transform:uppercase; color:#44962A; font-weight:bold }
ul.SearchResult li ul li span { display:table-cell; min-width:125px; width:auto; }
ul.SearchResult li ul li a { color:#44962A; }
ul.SearchResult li ul li a:hover { color:#FF9900; }

但是并排对齐根本不起作用。有什么问题？H？PS：是的，我在列表项中看到了浮动 div， 其中提到了它的 DIV，这里提到了 ul。“clear:left”是否适用于机器人？

对于 CSS 专家来说，这可能是重复的帖子，但我不是。所以请多多包涵[:)]

编辑说明：- 要详细解释这些内容，请使用图像 替代文本 http://www.yetanothercoder.com/img.jpg

4

1 回答 1

3

在您的 UL 中添加 clear:none 应该对其进行排序，因此：

ul.SearchResult li ul {float:left; clear:none; list-style:none; }

浮动将定位元素，但要让其他元素定位在它旁边，而不是在它下面，你需要应用 clear:none :)

希望这可以帮助！

于 2008-12-17T10:34:59.390 回答