将“
答
你的意思是这样的: 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; }
这是一个浮动的字段集。如果您需要其他方式,请告诉我们。
+0
即使在IE6中也可以使用。尼斯。 – 2010-10-26 09:07:27
+0
@皮卡像往常一样:使溢出的魔力:隐藏;为你做诀窍:) – 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>
更新:我忘了提,浮动块级元素,也改变了布局。
我能想到的唯一的跨浏览器方式是使其表现得像一张桌子一样,但这对于'fieldset'来说并不完美。有兴趣看看会发生什么 – 2010-10-26 09:03:42
您能否就以下解决方案是否令人满意向我们提供一些反馈意见? – 2010-10-27 12:06:05