Question

有没有办法让<fieldset>的宽度成为其中最大字段的宽度？

Answer 1

将问题放在一般情况下。 <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>

更新：我忘了提到浮动块级元素也会改变其布局。

Answer 2

你是说这个意思是： 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; }

这是一个浮动字段集。如果您想以其他方式使用它，请告诉我们。

将`<fieldset>`的宽度设置为包含最大元素</fieldset>的宽度

2 个答案: