圖像和文本在列表元素中的位置內聯

我想設計一個網頁，我有一個樂隊列表，每個圖像將是樂隊標誌（或某物）的小集圖片。我設置內聯風格，我已經嘗試垂直對齊和線高度等，似乎沒有任何工作。我很確定我可以用表格完成這個工作，但是我多次被告知這不是表格的正確使用方式。（另外我還是用新的CSS ..如果你分不清楚）圖像和文本在列表元素中的位置內聯

<div id ="Content"> 
     <ul> 
      <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li> 
      <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li> 
      <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li> 
      <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li> 
      <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li> 

     </ul> 
    </div>

這裏是CSS少量我

#content li{display:inline;} 
    img { 
    max-height:100px; 
    max-width: 100px; 
    } 

    #content ul{list-style-type: none; 
    clear:left; 
    }

任何幫助或建議將不勝感激

來源

2012-11-14 Taku_

究竟是什麼，你要完成？讓它們全部垂直對齊到頂部？底部？ –

我試圖讓文字排列在圖像的下方，但它在圖像的一側偏右。我可能應該提到這一點！ –

如果我明白你想要做什麼，試試這個：

#content li { 
    display: inline-block; 
    background-color: #eaeaea; 
    border: 1px solid red; 
    text-align: center; 
    max-width: 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    margin: 5px; 
} 

img { 
    max-height:100px; 
    max-width: 100px; 
    display: block; 
} 

#content ul{ 
    list-style-type: none; 
    clear:left; 
}

看一看在這裏：http://jsfiddle.net/zDhKQ/

來源

2012-11-14 19:55:43 technophobia

是的！這實際上是我正在嘗試做的！，即時通訊對不起，因爲誤解了：（ –

我知道我有一點點心理;） – technophobia

我最好的猜測是，你正在尋找這樣的：

#content ul li { 
    float:left; 
}

否則你必須要更具體一點關於你想要完成的事情。

來源

2012-11-14 19:46:38 Tys

我相信你想要對齊標籤。像這樣的東西：

<li><img src="IMG_3117.jpg" alt="Smiley face" width="42" height="42" align="left">This is some text. 
</li>

會導致一些看起來不錯。

來源

2012-11-14 19:49:48 PearsonArtPhoto

圖像和文本在列表元素中的位置內聯

回答

相關問題