Có cách nào đơn giản để nhận văn bản HTML và kiểu nhập = "văn bản" để hiển thị bằng (xấp xỉ) chiều rộng bằng nhau (tính bằng pixel), hoạt động trong các trình duyệt khác không?Có cách nào đơn giản để làm cho văn bản html và văn bản kiểu nhập văn bản rộng không?
Giải pháp CSS/HTML sẽ xuất sắc. Tôi không muốn sử dụng Javascript.
Cảm ơn /Erik
Bạn sẽ có thể sử dụng
.mywidth {
width: 100px;
}<input class="mywidth">
<textarea class="mywidth"></textarea>Điều này dường như không hoạt động nữa, tuy nhiên giải pháp này: http://stackoverflow.com/questions/9555877/getting-html- textarea-controls-to-expand-to-width-of-container/9556001 # 9556001 không – H2ONOCK
Vâng, có. Hãy thử làm một việc như sau:
<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />
Cả hai đều phải bằng với cùng kích thước. Bạn có thể làm điều đó với kích thước tuyệt đối (px), kích thước tương đối (em) hoặc kích thước phần trăm.
Chỉ cần một lưu ý - chiều rộng luôn bị ảnh hưởng bởi một cái gì đó đang xảy ra ở phía máy khách - PHP không thể ảnh hưởng đến những thứ đó.
Đặt một lớp chung trên các phần tử và đặt chiều rộng trong CSS là đặt cược sạch nhất của bạn.
Một người khác đã đề cập đến điều này, sau đó xóa nó. Nếu bạn muốn kiểu cho tất cả textareas và văn bản đầu vào cùng một cách mà không cần lớp học, sử dụng CSS sau đây (không hoạt động trong IE6):
input[type=text], textarea { width: 80%; }
Sử dụng một lớp CSS cho chiều rộng, sau đó đặt các yếu tố của bạn thành DIV HTML, DIV có lớp được đề cập.
Bằng cách này, điều khiển bố cục tổng thể sẽ tốt hơn.
Đây là một câu hỏi CSS: chiều rộng bao gồm độ rộng đường viền và đệm, có giá trị mặc định khác nhau cho INPUT và TEXTAREA trong các trình duyệt khác nhau, do đó hãy chắc những giống nhau cũng như:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>
này được mô tả trong phần Box dimensions của đặc điểm kỹ thuật CSS, có nội dung:
Chiều rộng hộp được cho bởi tổng lề trái, phải, đường viền và đệm và chiều rộng nội dung.
Để trả lời câu hỏi đầu tiên (mặc dù nó được trả lời cho đến chết): Chiều rộng CSS là những gì bạn cần.
Nhưng tôi muốn trả lời Gaius's question trong câu trả lời. Gaius, bạn đang có vấn đề là bạn đang thiết lập chiều rộng của em bé. Đây là một suy nghĩ tốt để làm nhưng bạn cần phải nhớ rằng em được dựa trên kích thước phông chữ. Theo mặc định, vùng nhập văn bản và vùng văn bản có các phông chữ khác nhau phải đối mặt với kích thước &. Vì vậy, khi bạn thiết lập chiều rộng là 35em, vùng đầu vào đang sử dụng chiều rộng của phông chữ và vùng văn bản đang sử dụng chiều rộng của phông chữ. Phông chữ mặc định của vùng văn bản nhỏ hơn, do đó hộp văn bản nhỏ hơn.Hoặc thiết lập chiều rộng bằng pixel hoặc điểm, tương đương đảm bảo rằng hộp đầu vào và textareas có cùng kích thước font face &:
.mywidth {
width: 35em;
font-family: Verdana;
font-size: 1em;
}<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>Hy vọng rằng sẽ giúp.
Như đã đề cập trong Unequal Html textbox and dropdown width with XHTML 1.0 strict nó cũng tùy thuộc vào loại tài liệu của bạn. Tôi đã nhận thấy rằng khi sử dụng XHTML 1.0 nghiêm ngặt, sự khác biệt về chiều rộng thực sự xuất hiện.
bạn cũng có thể sử dụng CSS sau:
.mywidth{
width:100px;
}
textarea{
width:100px;
}
HTML:
<input class="mywidth" >
<textarea></textarea>
Giải pháp đầu tiên của bạn đã được đề cập bởi câu trả lời được chấp nhận và giải pháp thứ hai sẽ làm cho tất cả 'textarea rộng 100px. – Manuel
Sử dụng CSS3 để làm cho textbox và làm việc đầu vào như vậy. Xem jsFiddle.
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type="text"] { width: 60%; }
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
Xem câu trả lời cho [Bắt HTML textarea điều khiển để mở rộng sang chiều rộng của container] (http://stackoverflow.com/a/9556001/165673), nó là tốt hơn so với các câu trả lời bao gồm ở đây. Hoặc để giải thích đầy đủ: [Box Sizing | CSS-Tricks] (http://css-tricks.com/box-sizing/) – Yarin