Html 如何使窗体和Div具有子元素的最大宽度_Html_Css

Html 如何使窗体和Div具有子元素的最大宽度

html css

Html 如何使窗体和Div具有子元素的最大宽度,html,css,Html,Css,我想知道如何使窗体和Div具有最大宽度的子元素。在本例中，表单和outerDiv都会拉伸页面的整个宽度。我希望表格和外套的宽度为200px 当我在iframe中有这个页面时，这就成了一个问题，因为页面的宽度比iframe大，我得到一个水平滚动条 <body> <form name="myForm" method="post" action="#" > <div id="outerDiv" > <div style="width:

我想知道如何使窗体和Div具有最大宽度的子元素。在本例中，表单和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>


无论是形式和外部div拉伸100%。我想知道我是怎么做的
会让它们紧紧地缠绕在里面的div上。

感谢您的时间和帮助。

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

style="display: inline;"

div是块元素并填充其容器，跨距是内联元素，可以收缩以适应其内容

可以将跨距用作容器，也可以将上述样式添加到div中

祝你好运

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

display: inline-block;

要防止

#outerDiv

的滚动条，可以设置最大宽度和溢出属性：

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

通过这种方式，您可以确保没有滚动条，并且我假设iframe的宽度永远不会超过300像素。另外，请确保在iframe上设置

frameborder=“0”

，并检查包含的html主体上的边距。

另外需要注意的是，在XHTML标准下，包含其他元素的范围无效，因此CSS方法更好，虽然我不确定为什么不将外部div和form都设置为200px宽度。根据Ole J.Helgesen的说法，内联块可能更好，但是在某些旧浏览器中对该属性的支持很差。你让我大吃一惊。你实际上把我带到了前端web开发的下一个层次，解决了我遇到的12个不同的问题。回答得好！这对我解决类似问题有很大帮助！你这辈子都到哪里去了。