如何使ul水平放置？

-1

什麼，我需要做的在Techcrunch的主頁的頂部看到一個例子，它是「熱門話題」可點擊項目的排它看起來像這樣：如何使ul水平放置？

熱門話題FOXCONN GOOGLE FACEBOOK蘋果ANDROID未來DIASPORA

我查看了'ul'標籤和'li'標籤的CSS樣式，我沒有看到任何使用CSS的東西，它可以讓我告訴瀏覽器「先生瀏覽器，這是一個無序列表。我意識到，瀏覽器先生，你通常垂直堆放ul的列表項，請改爲水平顯示列表項目這次 - 謝謝。「

我沒有看到任何的CSS，讓我來告訴「UL」奠定了列表項水平 - 因此，如何將下面的代碼使這種情況發生

這裏是「UL 「無序列表代碼，這是否TechCrunch的頁面上：

<div class="hot-topics-container"> 
<h4>**Hot topics**</h4> 
<ul id="menu-hot-topic-menu" class="hot-topics"> 

    <li id="menu-item-398682" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-398682"><a href="http://techcrunch.com/tag/apple/">**Apple**</a></li> 
    <li id="menu-item-394815" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-394815"><a href="http://techcrunch.com/tag/android/">**Android**</a></li> 
    <li id="menu-item-399998" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-399998"><a href="http://techcrunch.com/tag/future-of-foxconn/">**Future Of Foxconn**</a></li> 
    <li id="menu-item-398687" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-398687"><a href="http://techcrunch.com/tag/google/">**Google**</a></li> 
    <li id="menu-item-398668" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-398668"><a href="http://techcrunch.com/tag/facebook/">**Facebook**</a></li> 
    <li id="menu-item-435062" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-435062"><a href="http://techcrunch.com/tag/diaspora/">**Diaspora**</a></li> 
</ul>    
</div>

我試着用李浮動：左如下，沒有任何變化，但。

<head> 
<style type="text/css"> 
li{float:left;} 
</style> 
</head> 

<ul> 
<li> 
    <a href="http://localhost/mysite/landingpage.htm"> 
    <img src="http://localhost/mysite/someImage.png" 
    alt="http://localhost/mysite/someImage.png" 
    /img> 
    </a> 
</li> 
<li> 
    This text needs to appear to the right of the 1st list item 
</li> 
</ul>

把它弄出來了！這就是我必須要做的 - 我根本沒有漂浮過李。我不得不漂浮圖像0，這讓我感到驚訝，但嘿它的作品，我會去用它。這是代碼。在這段代碼中，第二個列表項，這是文字，出現在圖像的即時右側開始在圖像的最頂部邊緣的頂部：

<head> 
    <style type="text/css"> 
    #horizUL1 
    { 
     list-style:none; /* turns off the 'bullets' for this list type */ 
    }  

    #horizListImg 
    { 
     float:left; 
    } 
    </style> 
</head> 

<ul id="horizUL1"> 
<li> 
    <a href="http://localhost/mysite/landingpage.htm"> 
    <img id="horizListImg" src="http://localhost/mysite/someImage.png" 
    alt="http://localhost/mysite/someImage.png" 
    /img> 
    </a> 
</li> 
<li> 
    This text needs to appear to the right of the 1st list item 
</li> 
</ul>

來源

2011-11-24 wantTheBest

，使得列表顯示垂直CSS中發現地：

.module-header .hot-topics li { 
    float: left; 
}

浮動是相當困難的概念，我覺得這是最好的解釋A List Apart

css隱藏子彈列表項是：

li { 
    list-style: none; 
}

來源

2011-11-24 22:20:19

+1感謝Ben - A List Apart參考真的非常有幫助 - 希望我可以讓這些文字出現在圖片的右側 - 謝謝。 – wantTheBest

您需要申請float: left每個項目列表。

來源

2011-11-24 22:18:05 SLaks

有幾種方法可以做到這一點。設置li{display:inline-block}是一個; li{float:left;}是另一個。

來源

2011-11-24 22:18:57

應用：

#menu-hot-topic-menu li { display: inline; }

會榜上無名水平

來源

2011-11-24 22:20:08 Lauw

+1非常有幫助！謝啦。 – wantTheBest

ul {list-style:none} li {display:inline}

裏必須display:inline或display:inline-block或float:left

來源

2011-11-24 22:21:12

我想知道如果或Firefox導致問題 - 建議仍然有圖像下方的文字。 Firefox 8.0（最新版本）有這個bug嗎？ – wantTheBest

可能是幾件事情，我會檢查圖像寬度是否推動下一個LI元素，或者它可能是A也 –

大衛嗨，感謝你，實際上感謝這裏誰幫助我在正確的方向 - - 我找到了解決方案，代碼在上面 - 浮動列表項不起作用 - 我不得不漂浮在列表項中顯示的*圖像*（請參閱上面代碼示例底部的代碼）。現在，列表顯示了我的圖片，並立即顯示了正確的文本，正是我所需要的 - 在我想'浮動'圖像之前，我必須嘗試一堆不同的東西，並且它工作正常。 – wantTheBest

如何使ul水平放置？

回答

相關問題