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

标签 css

有什么方法可以让 <fieldset> 的宽度变大吗?是其中最大字段的宽度?

最佳答案

只需将您的问题置于一般背景下即可。 <fieldset>是一个 block 元素,因此它的默认行为是展开以填充可用的水平空间。所以你基本上有两个选择:

  1. 设置新的显式宽度。
  2. 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>

更新:我忘了提到 float block 级元素也会改变其布局。

关于css - 将 `<fieldset>` 的宽度设置为最大包含元素的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4022057/

相关文章:

javascript - 如何并排显示表格

css - 使用 CSS 在 Drupal 7 中排列字段显示

html - 表格最大高度 100% 的 div 位置固定

wordpress - CSS 渐变和背景平铺在一起不会覆盖页面的整个高度

css - 在 .swf 文件上放置一个透明的 <div>。我应该使用 z-index 或不透明度,还是其他?

html - 如何从网页中提取图像并保留其显示大小?

jquery - 除非原始表单数据已更改,否则禁用提交按钮

html - 如何更改 Bootstrap-select 占位符颜色

javascript - Meteor JS 在没有模板的情况下首先加载 : gives "null" error

asp.net - 在不同语言之间切换