如何使窗體和div有最大寬度的子元素

我想知道如何使窗體和div有最大寬度的子元素。例如，在這個例子中，表單和outerDiv都會擴展頁面的整個寬度。我希望窗體和outerDiv的寬度爲200px。如何使窗體和div有最大寬度的子元素

當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>

感謝您的時間和幫助。

來源

2009-02-15 rid00z

我認爲「正確」的方法是讓他們內聯元素：

style="display: inline;"

的div是塊元素，並填寫自己的容器，跨度內聯元素和縮小以適合他們的內容。

您可以使用跨度作爲容器或只是將上述樣式添加到您的div。

祝你好運！

來源

2009-02-15 23:43:38

只是在XHTML標準下的一個附加說明，包含其他元素的span是無效的，所以CSS方法更好，儘管我不確定爲什麼不將外部div和窗體都設置爲200px寬度。 – 2009-02-16 00:06:27

按照Ole J. Helgesen的說法，內聯塊可能會更好，但是對於某些舊瀏覽器而言，該屬性的支持很差。 – 2009-02-16 18:54:48

你剛纔弄明白了。你實際上把我帶到了前端Web開發的下一個階段，並解決了我遇到的12個不同的問題。 – pixelpax 2017-03-17 04:26:10

要像一個內聯元素塊顯示屏，您可以使用

display: inline-block;

來源

2009-02-16 00:58:24

爲了防止滾動條爲#outerDiv你可以設置一個最大寬度和溢出屬性：

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

這樣，你保證沒有滾動條，我假設iframe的寬度從不超過300像素。另外，請務必在iframe上設置frameborder="0"並檢查包含的html正文的邊距。

來源

2009-02-18 07:14:54 artlung

如何使窗體和div有最大寬度的子元素

回答

相關問題