如何顯示：內聯塊是內聯的？

<ul class="random-list"> 
    <li> 
     <div class="random-container"> 
      <div class="inline-block" style="vertical-align: top;"> 
       <img src="" /> 
      </div> 
      <div class="inline-block" style="vertical-align: top;"> 
       <a href="">Name</a> 
      </div> 
     </div> 
    </li> 
</ul>

和CSS：如何顯示：內聯塊是內聯的？

.random-container { 
    margin-bottom: 10px; 
    width: 100%; 
} 
.inline-block { 
    display: inline-block; 
}

結果：

Error

如何修復這個錯誤：

Fix

來源

2012-06-29 Hai Truong IT

這是預期的結果，哪個是實際結果？ –

怎麼樣你不使用inline-block在一個並且擺脫所有這些不必要的div。

<ul class="random-list"> 
    <li> 
     <img src="" /> 
     <a href="">Name</a> 
    </li> 
</ul>

Live Example

來源

2012-06-29 07:40:04

但結果不正確 –

@TrngHi：增加了現場示例。 –

設定的兩個元素浮動：左會是一個更好的選擇。檢查這個Fiddle。

來源

2012-06-29 07:41:48 Damien

浮動：左是一個很好的選擇.. :) – AlphaMale

-1

嘿，現在按照你的設計

你給李性能display:block;

像這樣

li{ 
display:block; 
}

或本

.random-list li{ 
display:block; 
}

現場演示http://jsfiddle.net/GrZLW/

來源

2012-06-29 07:43:28

你可以爲它寫一個小提琴。你看過它是否有效..？ – AlphaMale

嘿@AlphaMale檢查它我的現場演示： - http://jsfiddle.net/GrZLW/ –

屏幕上是否有足夠的空間？你的代碼適用於我，因爲它在這個工作fiddle：

這就是說：另一個+1去真相的答案。 Theres不需要使用您當前使用的太多div。

來源

2012-06-29 07:51:09

可能依賴於瀏覽器，因爲顯示：inline-block;不適用於較舊的IE。 – Damien

@Damien忘了提及我只使用舊的Firefox和新的Safari進行測試。不能與IE打擾... –

<ul class="random-list"> 
    <li> 
     <img src=""/> 
     <a href="">Name</a> 
    </li> 
</ul> 

#random-list 
{ 
    float:left; 
}

來源

2012-06-29 07:57:24 Prashobh

如何顯示：內聯塊是內聯的？

回答

相關問題