Căn chỉnh theo chiều dọc của nhãn CSS với các trường nhập

Tôi đang thiết kế bố cục biểu mẫu để uesd trên nhiều trang trong hệ thống trực tuyến. Một người sử dụng mộ đạo cho các mục đích này trong nhiều năm, tôi đang khá quen với việc sử dụng nhãn CSS + cho điều này ngay bây giờ.Căn chỉnh theo chiều dọc của nhãn CSS với các trường nhập

Một điều tôi chưa thể làm chủ là cách các trình duyệt khác nhau pad & định vị nhãn liên quan đến trường nhập. Tôi sẽ đưa ra một ví dụ mã, cộng với một hình ảnh cận cảnh về cách nó hiển thị trong mỗi trình duyệt (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>

OK - bây giờ tôi có thể đăng ảnh - đây là hình ảnh sau khi thay đổi của Ahmed Masud. Ông đã đúng - tệp reset.css tôi có (từ http://html5reset.org/) không có phần đệm trên phần tử đầu vào. Tuy nhiên, ngay cả sau khi áp dụng các thay đổi, vẫn có một biến thể trong căn chỉnh của căn cứ của văn bản trong nhãn so với văn bản trong đầu vào. Bây giờ Firefox là cấp độ chết và đối với IE & Chrome văn bản nhãn cao hơn 1px.

enter image description here

Nếu tôi loại bỏ các liên kết đến reset.css, mọi thứ thay đổi một lần nữa: Chrome trở nên chết cấp, IE đặt nhãn 1px cao hơn so với nhập văn bản, Firefox 1px thấp hơn so với nhập văn bản. Xem dưới đây:

enter image description here

Tôi phải chỉ ra rằng đây là một cách bố trí rất cơ bản, đơn giản là để thử và chẩn đoán vấn đề. Tôi sẽ làm cho nó trông tốt hơn sau này. Nhưng trước tiên tôi cần phải biết cách làm cho tất cả dòng văn bản của mình trên tất cả các trình duyệt bằng một giải pháp CSS.

Nguồn

2011-12-19 TMA-1

bạn có thể đăng số reset.css của bạn hay không giảm bớt? –

Đó là từ html5reset.org - thêm liên kết ở trên, cùng với câu trả lời của bạn bên dưới. –

sắp xếp css rồi hơi một nghệ thuật đen với CSS2 vì vậy hãy để tôi nói cho bạn biết những gì đang xảy ra:

1) reset.css bạn có lẽ là không đặt miếng đệm của các yếu tố đầu vào đó là lý do tại sao bạn đang nhận được mà tắt bởi lỗi 1/2 điểm ảnh

Hãy thử thêm những phong cách của bạn

Vì vậy, có một điều để loại bỏ đệm mà từ đầu vào:

input { padding: 0 }

Bây giờ bạn sẽ phải đặt chiều cao của cả hai yếu tố nhãn và đầu vào:

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

Điều khác là bạn có thể muốn căn chỉnh các trường độc đáo bên dưới trường kia. Một cách để đạt được điều đó là làm cho nhãn một khối với phao sở hữu trái:

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

và .fld một khối cũng như:

.fld { display: block }

bạn sẽ muốn thêm một số thông số khác để p để làm cho một thứ gì đó thẩm mỹ hơn.

Đây là những gì tôi đã làm để tập tin của bạn:

<!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>

này ám chỉ rằng cùng một cách trong IE/Safari/FF/Opera

Nguồn

2011-12-19 05:54:24

Cảm ơn bạn đã dành thời gian trả lời - đã chỉnh sửa câu hỏi ban đầu của tôi ở trên để bao gồm các thay đổi của bạn. Vẫn không nhận được sự liên kết hoàn hảo không may. –

Đây là một câu hỏi cũ nhưng vẫn có liên quan đến tháng 5 năm 2016. Lý do nó làm việc cho Ahmed trong câu trả lời của anh ấy và không phải cho bạn là nó có thể là vì bạn đang sử dụng ZOOM. Tôi thấy rằng tôi hiện đang đấu tranh với vấn đề tương tự chính xác như bạn. Mỗi khi tôi nhận được nó hoàn hảo, trong FF nếu tôi ZOOM trong đôi khi nhãn di chuyển lên. Vì vậy, tôi điều chỉnh CSS để đẩy nó xuống, nhưng vấn đề với đó là lần sau tôi thay đổi zoom nó sẽ được tắt một lần nữa theo cách khác. Rất bực bội. Tôi đã thử nhiều giải pháp và không có giải pháp nào là 100%. Ngoài ra, đôi khi thay đổi phông chữ cũng sẽ khiến nó bị lệch hướng ... – PerryCS

[Đăng nhập vào stackoverflow lần đầu tiên trong năm - wow - điều này đã có 10.000 lượt xem!] Nó không liên quan đến thu phóng. Nhưng đó là quá lâu trước đây, trước khi bootstrap đến và làm mọi thứ hoạt động trên một loạt các trình duyệt. Vì vậy .. có lẽ tôi nên đóng cửa sổ này xuống ... –

Đây là một cách để gắn kết:

<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; 
}

Nguồn

2013-05-29 18:31:15 Damian

Căn chỉnh theo chiều dọc của nhãn CSS với các trường nhập

Trả lời

Các vấn đề liên quan