将“<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>”的宽度设置为最大包含元素的宽度

回答

相关问题