CSS標籤與輸入字段的垂直對齊

我正在設計一個表單佈局，以便在在線系統的許多頁面上使用。一個虔誠的用戶爲此目的多年，我現在很習慣使用CSS +標籤。CSS標籤與輸入字段的垂直對齊

我還沒有能夠掌握的一件事是不同的瀏覽器填充&相對於輸入字段的位置標籤的方式。我將給出一個代碼示例，再加上它在每個瀏覽器中呈現的特寫圖像（IE = IE9）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <title>HTML template</title> 
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> 
    <link rel="stylesheet" type="text/css" href="reset.css" /> 
    <style> 
body { 
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif; 
    font-size:13px; 
    font-style:normal; 
    font-weight:normal; 
    letter-spacing:normal; 
    margin:20px; 
} 
input { 
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif; 
    border:solid 1px #666; 
    width:150px; 
} 
.fld { 
} 
.usr { 
    border:solid 1px red; 
} 
p { 
} 
</style> 
</head> 
<body> 
<p> 
    <label class="usr" for="email">Email*</label> 
    <input class="fld required email" type="text" name="email" id="email" value="Capital Letter"> 
</p> 
</body> 
</html>

好的 - 現在我可以張貼一張照片 - 這是Ahmed Masud的變化後的樣子。他是對的 - 我的reset.css文件（從http://html5reset.org/）沒有填充輸入元素。但是，即使在應用更改之後，標籤中文本的底部對齊與輸入中的底部對齊仍然存在差異。現在火狐瀏覽器已經死了，而對於IE瀏覽器來說，標籤文本高出1px。

enter image description here

如果我刪除到reset.css鏈接，事情再次發生變化：鍍鉻變爲死水平，即把標籤1px的比輸入文本更高版本，Firefox 1px的比輸入文本低。請看下圖：

enter image description here

我應該指出，這是一個非常基本的佈局，只是爲了嘗試和診斷問題。稍後我會讓它看起來更好。但首先，我需要知道如何使用一個CSS解決方案將所有文本排列在所有瀏覽器中。

來源

2011-12-19 TMA-1

你可以發佈你的reset.css以及pl緩解？ – 2011-12-19 05:20:13

它來自html5reset.org - 添加上面的鏈接，以及對下面的答案的回覆。 – 2011-12-20 00:35:18

好的CSS路線稍微一門黑色藝術與CSS2所以讓我告訴你發生了什麼：

1）reset.css你有可能是不重置這就是爲什麼你所得到的輸入元素的填充該關閉的1/2像素誤差

嘗試增加這些你的風格

這麼一件事就是從輸入移除填充：

input { padding: 0 }

現在，您將需要設置標籤和輸入元素的高度：

.fld { height: 16px; } 
.usr { height: 16px; }

的另一件事是，你可能要對齊領域一個很好低於其他。實現的方法之一就是使標籤與浮動left屬性塊：

.usr { display: block; float: left; }

和.FLD塊，以及：

.fld { display: block }

你會想一些其他的參數添加到p使渲染更美觀。

這裏是我做給你的文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <title>Southrock HTML template</title> 
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> 
    <link rel="stylesheet" type="text/css" href="reset.css" /> 
    <style> 

body { 
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif; 
    font-size:13px; 
    margin:20px; 
} 

input { 
    border:solid 1px #666; 
    width:150px; 
    padding: 0; 
    height: 16px; 
} 

.fld { } 

.usr { 
    border:solid 1px red; 
    height: 16px; 
    display: block; 
    float: left; 
    margin-right: 5px; 
    width: 7em; 
} 

p { 
    clear: both; 
    margin-bottom: 5px; 
} 




</style> 
</head> 
<body> 
<p> 
    <label class="usr" for="email">Email*</label> 
    <input class="fld required email" type="text" name="email" id="email" value="Capital Letter"> 
</p> 
<p> 
    <label class="usr" for="email">First Name*</label> 
    <input class="fld required email" type="text" name="fname" id="fname" value="Capital Letter"> 
</p> 
</body> 
</html>

這使得在IE/Safari瀏覽器/ FF /歌劇同樣的方式

來源

2011-12-19 05:54:24

感謝您花時間回答 - 編輯了我上面的原始問題以包含您的更改。不幸的是仍然沒有獲得完美的結盟 – 2011-12-20 00:36:10

這是一個較老的問題，但截至2016年5月仍然相關。它在Ahmed的回答中適用而不適合您的原因可能是因爲您正在使用ZOOM。我發現我目前正在爲你的EXACT同樣的問題苦苦掙扎。每當我得到完美的時候，在FF中如果我在縮放的時候標籤有時會向上移動。因此，我調整了CSS以將其推回，但與此相關的問題是，下次我改變縮放時，它將以另一種方式再次關閉。太令人沮喪了。我嘗試過很多解決方案，但都不是100％。此外，有時更改字體會導致它不對齊也... – PerryCS 2016-05-12 03:52:11

[登錄到stackoverflow第一次在幾年 - 哇 - 這已有10,000次！] 這不是縮放相關。但那是很久以前，在引導程序出現之前，所有事情都可以在各種瀏覽器上運行。所以..也許我應該關閉它... – 2017-07-21 04:55:42

這是使一個辦法：

<span> 
    <label>Email</label> 
    <input type="text" name="email" /> 
</span>

CSS：

form span { 
    vertical-align: middle; 
    display: block; 
    width: 100%; 
} 
form label { 
    display: inline-block; 
    float: none; 
    width: 150px; 
    padding: 0; 
    margin: 5px 0 0; 
    text-align: left; 
} 
form input { 
    display: inline-block; 
    float: none; 
    width:auto; 
    margin:5px 0 0 10px; 
    padding:5px 5px; 
}

來源

2013-05-29 18:31:15 Damian

CSS標籤與輸入字段的垂直對齊

回答

相關問題