尋找在同一行上顯示2個div標籤

-1

我有2個div標籤，前端顯示在不同的行上。我想在同一行上顯示它們。請注意第一個是標題，第二個是答案。這裏有一個例子：尋找在同一行上顯示2個div標籤

<div class="field-label">Type of Institution</div> 
    <div class="field-value">Fine Arts Magnet School</div>

當前前端顯示：

機構類型

美術磁石學校

這就是我想要的東西： 機構類型： 美術磁鐵學校

標題和文字在同一行上。如果文字很長，我希望它在標題下包裝。

來源

2014-10-06 dBiz

我不能改變div和使用更好的代碼。這是一個插件，我對這方面的知識有限。 – dBiz 2014-10-06 06:23:52

A <div>不適合使用。實際上它應該是

<dl> <dt>Type of Institution</dt> <dd>Fine Arts Magnet School</dd> </dl>

機構類型: 美術磁石學校

然後這裏Definition list with inline pairs

dt, dd { float: left } dt { clear:both }

或提供其他解決方案的一個解釋（這個問題有很多重複的問題）。

來源

2014-10-06 05:58:19 Elin

我無法更改div並使用更好的代碼。這是一個插件，我對這方面的知識有限。 – dBiz 2014-10-06 06:24:07

您可以使用display: inline或float: left（和其後的clear）。

這是一個CSS的視圖。第二件事是語義，用於對標籤值，你應該使用定義列表，所以：

<style> 
dl {overflow: hidden} 
dt, dd {float: left;} 
dt {width: 150px; clear: left; font-weight: bold;} 
</style> 

<dl> 
    <dt>Type of Institution</dt> 
    <dd>Fine Arts Magnet School</dd> 

    <dt>Students</dt> 
    <dd>3000</dd> 
</dl>

http://jsfiddle.net/jh0j3yg1/

來源

2014-10-06 06:01:16 panther

我無法更改div並使用更好的代碼。這是一個插件，我對這方面的知識有限。 – dBiz 2014-10-06 06:24:32

好的，在這種情況下，只需使用'div {float：left;}'，理想情況下可以使用任何ID/Class來避免設置浮動到頁面中的所有div。編輯：'.field-label，.field-value {float：left;} .field-label {clear：left}' – panther 2014-10-06 06:25:48

尋找在同一行上顯示2個div標籤

回答

相關問題