使用CSS如何最好地顯示名稱值對？

表的代碼我會替換爲：

<table> 
    <tr> 
     <td>Name</td><td>Value</td> 
    </tr> 
    ... 
</table>

從我一直在讀我應該有類似

<label class="name">Name</label><label class="value">Value</value><br /> 
...

觀念和極大的讚賞鏈接到在線樣本。我是一個開發人員的方式，超出了我的設計深度。

編輯：我的需要是能夠將數據顯示給用戶，並以單獨（但接近相同）的形式編輯值。

來源

2008-09-14 Iain Holder

你能解釋一下什麼樣的網頁？例如。它是一種形式，還是您有需要在「表格」中顯示的數據？ ;） – Till 2008-09-14 14:18:26

好主意，我現在編輯。 – 2008-09-14 14:21:31

主要標題是誤導性的，如果有人能夠編輯以反映IainMH正在討論表單字段的佈局，這將是一件好事。 – andyuk 2008-09-14 22:13:14

我認爲定義列表在語義上非常接近名稱/值對。

<dl> 
    <dt>Name</dt> 
    <dd>Value</dd> 
</dl>

Definition lists - misused or misunderstood?

來源

2008-09-14 14:17:59 macbirdie

The will indent the value，and it on a new line 名稱值 – 2008-09-14 14:22:50

這取決於樣式表。看看我的答案中的鏈接，並親自查看。 – Espo 2008-09-14 14:24:33

我認爲表格最適用於表格數據，它似乎你在那裏。

如果您不想使用表格，最好的辦法是使用定義列表（<dl> and <dt>）。以下是如何對它們進行設計，使其看起來像您的舊<td>佈局。 http://maxdesign.com.au/articles/definition/

來源

2008-09-14 14:16:58 Espo

使用浮動：屬性如： CSS：

.left { 
    float:left; 
    padding-right:20px 
}

HTML：

<div class="left"> 
Name<br/> 
AnotherName 
</div> 
<div> 
Value<br /> 
AnotherValue 
</div>

來源

2008-09-14 14:21:28

這是完全合理的使用表格什麼似乎是表格數據。

來源

2008-09-14 14:31:51 erlando

如果我正在寫一個形式，我通常使用這樣的：

<form ... class="editing"> 
    <div class="field"> 
     <label>Label</label> 
     <span class="edit"><input type="text" value="Value" ... /></span> 
     <span class="view">Value</span> 
    </div> 
    ... 
</form>

然後在我的CSS：

.editing .view, .viewing .edit { display: none } 
.editing .edit, .editing .view { display: inline }

然後用一些JavaScript我可以交換類從編輯形式觀看。

我提到了這種方法，因爲你想用幾乎相同的佈局顯示和編輯數據，這是一種方法。

來源

2008-09-14 14:36:19

與macbirdie一樣，我傾向於將這樣的數據標記爲定義列表，除非現有表格的內容可以被判斷爲是表格內容。

我會避免使用您建議的方式使用標籤。看一下標籤標籤@http://www.w3schools.com/tags/tag_label.asp的解釋 - 它的目的是讓你專注於其相關的控制。同樣避免使用通用的div和跨度，因爲從語義角度來看它們很弱。

如果您在一個屏幕上顯示多個名稱 - 值對，但在編輯屏幕上只編輯一個名稱，我會在前一個屏幕上使用一個表格，並在後者上使用一個表格。

來源

2008-09-15 13:08:48

水平清晰度列出工作得很好，即

<dl class="dl-horizontal"> 
     <dt>ID</dt> 
     <dd>25</dd> 

     <dt>Username</dt> 
     <dd>Bob</dd> 
    </dl>

的dl-horizontal類由引導CSS框架提供。

來源

2016-09-14 10:17:53

使用CSS如何最好地顯示名稱值對？

回答

相關問題