văn bản gói không đúng cho nút radio

tôi có 2 nút radio html (cách nhau bằng <br /> thẻ), nơi các văn bản được gói dưới nút radio thay vì sắp xếp với sự thụt lề trái (do kích thước nó chứa div). Các gói văn bản không phải là vấn đề, vấn đề là nó được gói không chính xác dưới nút radio chính nó, thay vì căn chỉnh với văn bản trong dòng ở trên nó. Tôi cho rằng ai đó đã tạo kiểu cho thẻ đầu vào ở đâu đó trong tầng. Tôi chưa thực hiện tìm kiếm đầy đủ về tất cả các kiểu được đính kèm với trang này, nhưng không nên văn bản chỉ tự động bao bọc chính xác, giống như một danh sách dấu đầu dòng?
enter image description here văn bản gói không đúng cho nút radio

Và nếu không, làm thế nào tôi có thể sửa lỗi này? Tôi có cần phải chèn một thẻ <br /> vào nơi tôi muốn các đường ngắt để chúng được căn chỉnh chính xác không?

Cảm ơn!

Nguồn

2011-10-07 Chris22

Bạn có thể thêm [jsFiddle] (http://jsfiddle.net/) của những gì bạn có không? Hoặc chỉ cần thêm HTML hiện tại của bạn? Nó sẽ trả lời một số câu hỏi tôi có, ví dụ: bạn đang sử dụng ''? – thirtydot

Đây là giải pháp tôi sẽ thử: [link] (http://stackoverflow.com/questions/911644/how-can-i-make-multi-line-vertically-and-horizontally-aligned-labels-for-radio- b) Tôi không muốn phải viết một quy tắc bó, chỉ cần sửa đổi những gì tôi có ... nhưng nó là một giải pháp. Nếu ai đó tốt hơn, hãy đăng bài. Cảm ơn. – Chris22

thirtydot, tôi không sử dụng nhãn. Tôi không reeeeaal chắc chắn làm thế nào để sử dụng được nêu ra. sẽ google. nhưng tôi đã thấy các bài đăng khác bằng cách sử dụng đó. chính xác ' 'làm gì? – Chris22

Trước hết, việc sử dụng <br /> thường không được khuyến nghị, tốt hơn hết là thử và sử dụng thuộc tính CSS margin để tạo khoảng trắng giữa các phần tử.

Bạn cũng nên sử dụng CSS để thực hiện những gì bạn muốn làm. Điều này là do theo mặc định những yếu tố đó sẽ không có loại hành vi này.

Trong trường hợp này bạn sẽ muốn cái gì đó trông như thế này:

<div style="width:300px"> 
    <input type="radio" class="radioLeft" /> 
    <div class="textBlock"> 
     Some text that is too long to fit inline and must be broken 
     up over multiple lines.Some text that is too long to fit inline 
     and must be broken up over multiple lines.Some text that is too 
     long to fit inline and must be broken up over multiple lines. 
    </div> 
    <div style="clear:both;"></div> //this is important for repeated inputs 
</div>

Và sau đó CSS của bạn sẽ trông như thế này:

.radioLeft 
{ 
    float: left; 
} 

.textBlock 
{ 
    float: left; 
    width: 80%; //Adjust this value to fit 
}

Nguồn

2011-10-07 16:56:39 Eganr

Eganr của bạn, văn bản được gói dưới nút radio. Tôi có nó được đặt trong một chiều rộng div: 300px. Nhưng điều đó không quan trọng, vì lớp '.textblock' có chiều rộng nhỏ hơn? Tôi đã thêm một jsfiddle (ở trên) của mã của tôi. – Chris22

http://jsfiddle.net/Chris22/G3RE7/2/ – Chris22

Vì một số lý do tôi không thể xem jsfiddle tại nơi làm việc, bạn có thể dán mã hoặc sử dụng một giải pháp thay thế. Một điều tôi quên là báo giá đóng trên lớp radioLeft. Tôi cũng đã cập nhật câu trả lời của mình một chút. Đây là ví dụ trực tiếp về CSSDesk của tôi: http://cssdesk.com/FwpGr – Eganr

Bạn chỉ có thể sử dụng CSS để buộc các văn bản để bọc đúng. Tôi giả định rằng bạn có một thẻ <span> xung quanh văn bản và do đó bạn có thể sử dụng những điều sau đây để điều chỉnh vị trí của nó:

span { 
    display: block; 
    margin-top: -16px; 
    margin-left: 28px; 
}

Hy vọng rằng điều này giúp! Tomer

Nguồn

2011-10-08 00:29:10

Xin lỗi vì trả lời này quá muộn, tôi chỉ đi qua bài viết này, đây là một giải pháp:

p { margin-left: 20px; text-indent: -20px; }

Nguồn

2013-05-08 18:53:25 davewoodhall

trả lời cho năm 2015:
Kể từ khi không ai trong số các soultions khác làm việc cho tôi, đây là làm thế nào tôi làm điều đó:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Radiobutton labels aligned</title> 
<style type="text/css"> 
    div { display:table-row; } 
    div span { display:table-cell; vertical-align:middle; } /* You can omit the entire span if you don't want the radiobutton vertically centered */ 
    div label { display:table-cell; } 
</style> 
</head> 
<body> 
<form> 
<div> 
    <span><input type="radio" id="a"></span> 
    <label for="a">First button's label<br>First button's label</label> 
</div> 
<div> 
    <span><input type="radio" id="b"></span> 
    <label for="b">Second button's label</label> 
</div> 
<input type="radio" id="c"><label for="c">For comparison: Standard-Label</label> 
</form> 
</body> 
</html>

Xem http://jsfiddle.net/8jzss08p/
trình tại: Firefox 41, Chrome 45, Internet Explorer 11

Nguồn

2015-10-14 14:53:06

Câu trả lời hay. Làm việc như quyến rũ. – Olaf

Sử dụng
để ngắt dòng? Không phải là thô? Các văn bản nên quấn và sau đó thụt lề. – Chiwda

Hoạt động tuyệt vời. Đây là câu trả lời được chấp nhận. – pk1557

văn bản gói không đúng cho nút radio

Trả lời

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