Đặt chiều rộng của một `<fieldset>` thành chiều rộng của phần tử có chứa lớn nhất

Có cách nào để có chiều rộng là <fieldset> là chiều rộng của trường lớn nhất bên trong nó không?Đặt chiều rộng của một `<fieldset>` thành chiều rộng của phần tử có chứa lớn nhất

Nguồn

2010-10-26 ziiweb

Cách duy nhất của trình duyệt chéo mà tôi có thể nghĩ là làm cho nó hoạt động giống như một bảng, nhưng điều đó không hoàn hảo cho một 'fieldset'. Quan tâm để xem những gì đi lên –

Bạn có thể cung cấp cho chúng tôi một số phản hồi về việc liệu các giải pháp dưới đây có thỏa mãn không? –

Bạn có nghĩa này: jsFiddle fieldset that is wide as biggest containing input-element

<form action="#" id="test" name="test"> 
    <fieldset> 
     <input type="text" class="first" /> 
     <input type="text" class="second" /> 
     <input type="text" class="third" /> 

    </fieldset> 

</form> 

fieldset{ 
    overflow: hidden; 
    float: left; 
    background-color: #eee; 
} 
input { 
    display: block; 
} 
input.first{ width: 150px; } 
input.second{ width: 200px; } 
input.third { width: 250px; }

Nó là một fieldset nổi. Nếu bạn muốn theo cách khác, vui lòng cho chúng tôi biết.

Nguồn

2010-10-26 09:04:13

Thậm chí hoạt động trong IE6. Tốt đẹp. –

@Pekka Như mọi khi: làm cho ma thuật tràn: ẩn; làm lừa cho bạn :) –

Chỉ cần đặt câu hỏi của bạn trong ngữ cảnh chung. Một <fieldset> là một phần tử khối, do đó hành vi mặc định của nó là để mở rộng để lấp đầy không gian ngang có sẵn. Vì vậy, về cơ bản bạn có hai tùy chọn:

Đặt chiều rộng rõ ràng mới.
Thay đổi bố cục từ block thành thứ khác.

Dưới đây là một ví dụ nhanh:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"><!-- 
fieldset.explicit-width{ 
    width: 1%; /* Will expand to fit content */ 
} 
fieldset.inline-block{ 
    display: inline-block; 
} 
--></style> 
</head> 
<body> 

<fieldset><legend>Unstyled</legend> 
    <p><input type="text" size="2"></p> 
    <p><input type="text" size="20"></p> 
    <p><input type="text" size="50"></p> 
    <p><input type="text" size="30"></p> 
</fieldset> 

<fieldset class="explicit-width"><legend>Explicit width</legend> 
    <p><input type="text" size="2"></p> 
    <p><input type="text" size="20"></p> 
    <p><input type="text" size="50"></p> 
    <p><input type="text" size="30"></p> 
</fieldset> 

<fieldset class="inline-block"><legend>Inline-block</legend> 
    <p><input type="text" size="2"></p> 
    <p><input type="text" size="20"></p> 
    <p><input type="text" size="50"></p> 
    <p><input type="text" size="30"></p> 
</fieldset> 

</body> 
</html>

Cập nhật: tôi quên đề cập đến nổi một yếu tố khối cấp cũng thay đổi bố trí của nó.

Nguồn

2010-10-26 09:08:13

Đặt chiều rộng của một `<fieldset>` thành chiều rộng của phần tử có chứa lớn nhất

Trả lời

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