浮动无序列表项目（ul）相邻

我想将两个孩子无序列表并排放置。他们有类名L和R浮动无序列表项目（ul）相邻

继承人是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？上午：是的，我看到了floating divs in list items 其DIV在这里提到，并在这里。 “清除：左侧”适用于机器人吗？

它可能是CSS专家的重复帖子，但我不是。所以，请用它承担[:)]

编辑注： - 要解释的东西详细继承人图像 alt text http://www.yetanothercoder.com/img.jpg

来源

2008-12-17 naveen

也许我不明白你想要做什么，但它看起来很好。我尝试了IE7和Firefox，并且都在“ROSE VILLA”部分旁边显示了“1 2 3 4”链接。那是你正在尝试做什么？ – 2008-12-17 07:42:01

@Crumley： - 我希望事情现在更清楚了...... – naveen 2008-12-17 08:53:10

添加一个明确的：没有你的UL的应该对它进行排序，那么：

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

浮动将位置的元素，而是让其他元素位置，旁边是它作为反对它的下面，你需要应用明确的：没有:)

希望这有助于！

来源

2008-12-17 10:34:59

浮动无序列表项目（ul）相邻

回答

相关问题