在不使用表格的情況下將「標籤 - 值」放在中間

Question

因此，您經常會有許多標籤（讓我們使用名稱，年齡和顏色）以及每個標籤的值！

如果我把它們放在一個2列3行表中，我可以確保這些值（讓我們使用Steve，19，Red）都在相同的水平位置開始。

如果我希望將該列左對齊，並且如果我還希望標籤列右對齊。然後兩列將在桌子中心很好地相遇..

我該怎麼做，而不使用表格，而不必設置固定的寬度！

Answer 1

你要必須解決自己使用固定寬度爲您的標籤下面是最小的才知道自己要完成的

CSS（如果要純CSS的路線。）（從HTML Dog拉）：

label { 
    clear: left; 
    float: left; 
    width: 7em; /* or whatever length suits */ 
    text-align: right; 
} 

HTML ：

<form> 
    <div><label>Item 1</label><input /></div> 
    <div><label>Item 2</label><input /></div> 
    <div><label>Item 3</label><textarea></textarea></div> 
</form> 

如果你絕對不想固定寬度，那麼你可以使用這個JavaScript（用jQuery），並從上面的CSS取消固定寬度。值得注意的是，如果您將javascript關閉，那麼這看起來會很糟糕！

var largestWidth = 0; 
$('label').each(
    function() { 
     if ($(this).width() > largestWidth) { 
      largestWidth = $(this).width(); 
     } 
    }); 

$('label').each(
    function() { 
     $(this).width(largestWidth); 
    }); 

我在JSFiddle上拋出了一個實例。

鑑於你引用的用例，我實際上認爲表是更好的方法，但我有一個differing opinion on the table/div form debate than most。

Answer 2

我聽到你在說什麼，但是我可以提醒你表格數據沒關係！

但是要使用純CSS來做到這一點，您可以將標籤和值左浮動，之後清除，並將兩個元素都設置爲顯示寬度爲50％的塊。

Answer 3

我想你需要JavaScript才能解決這個問題。我不相信有一個純粹的CSS解決方案。

確實具有固定寬度工作在多語言網站，標籤寬度可以不同，或者寬度可以根據喜歡的文字大小的瀏覽器設置更改工作時可能會出現問題...

Answer 4

您可以使用UL LI列表進行替代。

<fieldset> 

<legend>Sign-up Form</legend> 
<form name="signup" action="index.html" method="post"> 
<ul> 
<li> <label for="name">Name</label> 
<input type="text" name="name" id="name" size="30" /> 
</li> 
<li> <label for="email">Email</label> 
<input type="text" name="email" id="email" size="30" /> 
</li> 



<li> <label for="psw">Password</label> 
<input type="text" name="psw" id="psw" size="30" /> 
</li> 



<li> <label for="free">Free Subscrition</label> 
<input type="radio" name="subscription" id="free"/> 
</li> 

<li><label for="submit"></label> 
<button type="submit" id="submit">Send</button> </li> 
<ul> 
</form> 

</fieldset> 

css 

fieldset ul, fieldset li{ 
border:0; margin:0; padding:0; list-style:none; 
} 
fieldset li{ 
clear:both; 
list-style:none; 
padding-bottom:10px; 
} 

fieldset input{ 
float:left; 
} 
fieldset label{ 
width:140px; // or you give width in % here 
float:left; 
}