CSS對準標記和輸入

HTML代碼段：CSS對準標記和輸入

<fieldset id="o-bs-sum-buginfo"> 
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> 
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> 

    <label for="o-bs-sum-bug-ErrorNumber">Error Number</label> 
    <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" /> 
    .... 
</fieldset>

僅使用CSS（或jquery的），而不管瀏覽器的大小的，我要配對標籤和輸入元件彼此相鄰。我也有改變HTML的自由。如果需要。

來源

2011-01-09 hashg

這是這些東西可以是令人驚訝的棘手得到正確的。

很多人會建議使用float:left;。就我個人而言，我真的不喜歡花車;他們似乎會造成比解決問題更多的問題。

我的首選是使用內聯塊。這是一種顯示方法，它將內聯屬性（因此您可以輕鬆地將元素相互對齊等）與塊屬性（如能夠指定尺寸）結合使用。

所以答案是簡單地讓它們都爲display:inline-block;並給出提示固定的寬度，這將使得它們旁邊的輸入字段排成一行。

您還需要某種換行符或輸入字段之後的中斷，否則下一個提示符將顯示在同一行上，這不是所需的效果。達到此目的的最佳方法是將每個提示和其字段放入一個容器<div>中。

所以你的HTML看起來像這樣：

<fieldset id="o-bs-sum-buginfo" class="myfields"> 
    <div> 
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> 
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> 
    </div> 

    <div> 
    <label for="o-bs-sum-bug-ErrorNumber">Error Number</label> 
    <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" /> 
    </div> 
    .... 
</fieldset>

和你的CSS看起來就像這樣：

.myfields label, .myfields input { 
    display:inline-block; 
} 

.myfields label { 
    width:200px; /* or whatever size you want them */ 
}

希望有所幫助。

編輯：你可以使用這個插件來設置每個標籤的寬度：

jQuery.fn.autoWidth = function(options) 
{ 
    var settings = { 
     limitWidth : false 
    } 

    if(options) { 
     jQuery.extend(settings, options); 
    }; 

    var maxWidth = 0; 

    this.each(function(){ 
     if ($(this).width() > maxWidth){ 
      if(settings.limitWidth && maxWidth >= settings.limitWidth) { 
      maxWidth = settings.limitWidth; 
      } else { 
      maxWidth = $(this).width(); 
      } 
     } 
    }); 

    this.width(maxWidth); 
}

from this page in a comment

，你使用這種方式：

$("div.myfields div label").autoWidth();

和多數民衆所有......你所有的標籤都將採用最長標籤的寬度

來源

2011-01-09 19:54:40 Spudley

完美的作品。如果沒有div容器纏繞標籤和輸入，我會遇到問題。 – hashg 2011-01-09 22:24:23

#o-bs-sum-buginfo label, #o-bs-sum-buginfo input{display:inline-block;width:50%;}

來源

2011-01-09 19:53:28 Shahid

1很好的回答，僅此代碼片段 - >顯示：內聯塊;寬度：50％;足夠！ – B4NZ41 2012-07-12 00:44:28

將每個標籤及其相應的輸入放入p標籤中。然後添加以下css：

label{ 
    float:left; 
    width:100px; //whatever width that suits your needs 
} 

p{ 
    margin:10px 0; //manipulate the vertical spaces for each input.. 
} 



<fieldset id="o-bs-sum-buginfo"> 
    <p> 
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> 
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> 
    </p> 
</fieldset>

來源

2011-01-09 19:56:33 amosrivera

`p`在這裏是非語義的。這不是一系列的段落。 `div`會是更好的選擇。看到接受的答案。 – 2013-01-02 00:26:03

我認爲使用JavaScript的簡單的CSS技巧是矯枉過正。這裏是一個我剛纔所說： http://jsfiddle.net/t6R93/

div{ 
    display: table-row; 
} 
label,input{ 
    display:table-cell; 
}

PS：這可能與其他瀏覽器的缺陷。我只用Chrome進行測試。

來源

2013-11-15 18:32:55 egiray

我很好奇，看看這是否可以用「自然」語義標記完成，即沒有非語義包裝元件和與其對應的input而不是指其與略微笨重for屬性label含有：

<fieldset> 
    <label>Error Prefix<input/></label> 
    <label>Error Number<input/></label> 
</fieldset>

一個固定寬度的標籤不會在這裏，因爲對準的輸入文字是不是一個獨立的元素，沙希德的優雅最小的解決方案也不管用，但如果你願意讓所有的輸入相同的寬度（恕我直言，這看起來不錯，反正），你可以float他們right：

label { display:block; margin:8px; width:360px; clear:right; overflow:auto; } 
input, button, textarea, select { box-sizing:border-box; -moz-box-sizing:border-box; width:200px; float:right; }

The當FF29被釋放時，應該是多餘的，甚至不需要box-sizing，除非你混合了表單控件類型。 textarea特別需要clear和overflow。

全混合輸入型例如：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Aligned labels</title> 
    <style> 
     label { display:block; margin:8px; width:360px; clear:right; overflow:auto; } 
     input, button, textarea, select { box-sizing:border-box; -moz-box-sizing:border-box; width:200px; float:right; } 
    </style> 
    </head> 
    <body> 
    <label>Name<input type="text" value="Sir Galahad of Camelot"/></label> 
    <label>Quest<textarea>I seek the Holy Grail</textarea></label> 
    <label>Favourite Colour<select><option>Blue</option><option>Yellow</option></select></label> 
    <label>If you're sure...<button>Give Answers</button></label> 
    </body> 
</html>

來源

2014-04-03 17:44:41 mrec

有沒有必要使用JavaScript，jQuery的，或額外的div秒。你只需要：

浮動既input和label到左（注意input必須是塊浮動）。
將clear: both加到label。
將固定寬度（例如100px）設置爲label。

input { 
 
    display: block; 
 
    float: left; 
 
} 
 
label { 
 
    float: left; 
 
    clear: both; 
 
    width: 100px; 
 
}

<fieldset id="o-bs-sum-buginfo"> 
 
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> 
 
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> 
 

 
    <label for="o-bs-sum-bug-ErrorNumber">Error Number</label> 
 
    <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" /> 
 
</fieldset>

來源

2016-01-07 21:14:29

CSS對準標記和輸入

回答

相關問題