定義的CSS表顯示多行

-1

我已經建立了一個編輯頁面場標籤的div和現場編輯的div按通常ASP.Net MVC，導致下面的HTML：定義的CSS表顯示多行

<div class="editor-label"> 
    <label for="Code">Project Code</label> 
</div> 
<div class="editor-field"> 
    <input id="Code" name="Code" type="text" value="" /> 
</div>

以上對我的表單上的可編輯字段將重複一對div。默認情況下，這些只在頁面上顯示一個在另一個下面。我想實現的是使用CSS來在表格佈局中顯示頁面。所以我的CSS是這樣的：

.field-label, .field-editor{ 
display: table-cell; 
}

這只是顯示他們都在彼此相鄰細胞包裹在瀏覽器窗口的結束。我怎麼能在每個field-editor div之後（或每個field-label div之前）強制一個新的行，而不向視圖添加額外的標記？我明白，通過向視圖添加附加標記可以很簡單，就像我分配的新div一樣：table-row。但是我不得不在每組標籤/編輯器組合之間添加這個標記，這只是感覺違反了DRY原則。所以我想這樣做，而不需要做這個額外的標記。

來源

2012-05-19 Shawn de Wet

由於這只是標記爲[css]，因此您的受衆很可能不會熟悉這種特殊的ASP.Net功能吐出的標記。你能提供一個例子嗎？ –

如此編輯以包含示例HTML。 –

鑑於上述HTML，以下CSS將工作：

.editor-label, .editor-field { 
    display: inline-block; 
    width: 48%; 
} 

.editor-label { 
    text-align: right; 
}

這將允許元件共享相同的線，並採取分配的寬度（在此相對於殼體向父元素的寬度）。 text-align聲明只是簡單地將label的文本視爲靠近input元素。

JS fiddle demo。

當然，您可以使用不同的寬度獲得相同的結果，並且不需要在div s中不必要地包裹label和input元素。

有了一個稍微整理好的版本：

label, input { 
    display: inline-block; 
} 

label { 
    text-align: right; 
    width: 20%; 
} 

input { 
    width: 30%; 
    margin-right: 30%; 
}

JS Fiddle demo。

的margin-right聲明只是使label的總寬度，在input及其margin-right留下足夠的空間在未來label佔據同一行。

來源

2012-05-19 19:21:59

定義的CSS表顯示多行

回答

相關問題