將「<fieldset>」的寬度設置爲最大包含元素的寬度

有沒有什麼方法可以將<fieldset>的寬度作爲其中最大字段的寬度？將「<fieldset>」的寬度設置爲最大包含元素的寬度

2010-10-26 ziiweb

我能想到的唯一的跨瀏覽器方式是使其表現得像一張桌子一樣，但這對於'fieldset'來說並不完美。有興趣看看會發生什麼 – 2010-10-26 09:03:42

您能否就以下解決方案是否令人滿意向我們提供一些反饋意見？ – 2010-10-27 12:06:05

你的意思是這樣的： 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; }

這是一個浮動的字段集。如果您需要其他方式，請告訴我們。

來源

2010-10-26 09:04:13

即使在IE6中也可以使用。尼斯。 – 2010-10-26 09:07:27

@皮卡像往常一樣：使溢出的魔力：隱藏;爲你做訣竅:) – 2010-10-26 09:09:03

只是把你的問題放在一般的背景下。 A <fieldset>是一個塊元素，因此其默認行爲是擴展以填充可用的水平空間。所以你基本上有兩種選擇：

設置一個新的顯式寬度。
將其佈局從block更改爲其他內容。

這裏有一個簡單的例子：

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

更新：我忘了提，浮動塊級元素，也改變了佈局。

來源

2010-10-26 09:08:13

將「<fieldset>」的寬度設置爲最大包含元素的寬度

回答

相關問題