Question

我想知道如何创建一个Form并且Div具有子元素的最大宽度。例如，在此示例中，form和outerDiv都会拉伸页面的整个宽度。我希望表单和outerDiv的宽度为200px。

当我在iframe中有这个页面时会出现问题，因为页面的宽度比iframe大，我得到一个水平滚动条。

<body>
<form name="myForm" method="post" action="#"  >
    <div id="outerDiv" >
        <div style="width: 200px">
        Both the form and outer div stretch 100%. I am wondering how I
        would get them to wrap tightly around the inner div.
        </div>
    </div>
</form>
</body>

感谢您的时间和帮助。

Answer 1

要使块显示像内联元素一样，您可以使用

display: inline-block;

Answer 2

我认为“正确”的方法是使它们成为内联元素：

style="display: inline;"

div是块元素并填充其容器，跨度是内联元素并缩小以适合其内容。

您可以将spans用作容器，也可以只将上面的样式添加到div中。

祝你好运！

Answer 3

要阻止#outerDiv的滚动条，您可以设置最大宽度和溢出属性：

#outerDiv {
  max-width: 300px;
  overflow: hidden;
}

通过这种方式，您可以确保没有滚动条，我假设iframe的宽度从不宽于300像素。另外，请务必在iframe上设置frameborder="0"并检查所包含的html正文的边距。

如何使表单和Div具有子元素的最大宽度

3 个答案: