我在包含div中有一个表单，但表单显示在容器外：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Checkboxes
</title>
<style>
.tex-filter-div{
float:left;
}
#tex-filter-form-container{
border:1px solid black;
}
</style>
</head>
<body>
<div id="tex-filter-form-container">
<div id="filter-instructions"><p>To filter projects, click a heading and select a filter.</p></div>
<div>
<form>
<div id="filter-div-project_category" class="tex-filter-div">
<div class="filter_category">
<h2 id="filter_category_heading_project_category" class="filter_category_heading">⟱ Filter by category
</h2>
</div>
<div class="filter_lists">
<div style="display: block;" id="selection_project_category" class="tex_filter_list">
<ul class="filter-checkbox-list">
<li class="filter-labels-list-element">
<input class="tex-filter-checkbox-project_category" id="natural-resources" name="natural-resources" value="natural-resources" type="checkbox">
<label class="filter-labels" for="natural-resources">Natural Resources
</label>
</li>
</ul>
</div>
</div>
</div>
<div id="filter-div-project_location" class="tex-filter-div">
<div class="filter_category">
<h2 style="text-align: center;" id="filter_category_heading_project_location" class="filter_category_heading">⟱ Filter by location
</h2>
</div>
<div class="filter_lists">
<select id="selection_project_location" name="project_location" multiple="multiple" class="tex_filter_list">
<option class="tex-filter-option" value="boston">Boston
</option>
<option class="tex-filter-option" value="boulder">Boulder
</option>
</select>
</div>
</div>
<div id="filter-div-project_status" class="tex-filter-div">
<div class="filter_category">
<h2 id="filter_category_heading_project_status" class="filter_category_heading">⟱ Filter by status
</h2>
</div>
<div class="filter_lists">
<div style="display: block;" id="selection_project_status" class="tex_filter_list">
<ul class="filter-checkbox-list">
<li class="filter-labels-list-element">
<input class="tex-filter-checkbox-project_status" id="complete" name="complete" value="complete" type="checkbox">
<label class="filter-labels" for="complete">Complete
</label>
</li>
</ul>
</div>
</div>
</div>
</form></div>
</div>
</body>
</html>
表单显然位于包含div的内部，但完全显示在其外部。我不确定这里有什么不对。
答案 0 :(得分：2)
以下是CSS和HTML，我希望你得到你想要的。
＆＃13;＆＃13; `＆＃13;＆＃13;＆＃13;.container-wrapper { border: 1px solid black; }＆＃13;<div class="container-wrapper"> <div id="filter-instructions"> <p>To filter projects, click a heading and select a filter.</p> </div> <div class="tex-filter-form-container"> <form> <div id="filter-div-project_category" style="float:left"> <div class="filter_category"> <h2 id="filter_category_heading_project_category" class="filter_category_heading">⟱ Filter by category </h2> </div> <div class="filter_lists"> <div style="display: block;" id="selection_project_category" class="tex_filter_list"> <ul class="filter-checkbox-list"> <li class="filter-labels-list-element"> <input class="tex-filter-checkbox-project_category" id="natural-resources" name="natural-resources" value="natural-resources" type="checkbox"> <label class="filter-labels" for="natural-resources">Natural Resources </label> </li> </ul> </div> </div> </div> <div id="filter-div-project_location" style="float:left"> <div class="filter_category"> <h2 style="text-align: center;" id="filter_category_heading_project_location" class="filter_category_heading">⟱ Filter by location </h2> </div> <div class="filter_lists"> <select id="selection_project_location" name="project_location" multiple="multiple" class="tex_filter_list"> <option class="tex-filter-option" value="boston">Boston </option> <option class="tex-filter-option" value="boulder">Boulder </option> </select> </div> </div> <div id="filter-div-project_status" class="tex-filter-div"> <div class="filter_category"> <h2 id="filter_category_heading_project_status" class="filter_category_heading">⟱ Filter by status </h2> </div> <div class="filter_lists"> <div style="display: block;" id="selection_project_status" class="tex_filter_list"> <ul class="filter-checkbox-list"> <li class="filter-labels-list-element"> <input class="tex-filter-checkbox-project_status" id="complete" name="complete" value="complete" type="checkbox"> <label class="filter-labels" for="complete">Complete </label> </li> </ul> </div> </div> </div> </form> </div> </div>
`
答案 1 :(得分：1)
浮动元素时，需要清除＆＃34;清除＆＃34;浮动因为浮动元素从正常文档流中移除。我已经应用了最常见的＆＃34; clearfixs＆＃34;在这里找到http://nicolasgallagher.com/micro-clearfix-hack/
还有很多其他选择，只需谷歌＆＃34; clearfix＆＃34;您将看到有关清除结果顶部浮动元素的一些选项和其他信息。
编辑 - 这是关于清除浮动的一篇很棒的文章。 https://css-tricks.com/the-how-and-why-of-clearing-floats/
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Checkboxes
</title>
<style>
.tex-filter-div {
float: left;
}
#tex-filter-form-container {
border: 1px solid black;
}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
</style>
</head>
<body>
<div id="tex-filter-form-container" class="cf">
<div id="filter-instructions">
<p>To filter projects, click a heading and select a filter.</p>
</div>
<div>
<form>
<div id="filter-div-project_category" class="tex-filter-div">
<div class="filter_category">
<h2 id="filter_category_heading_project_category" class="filter_category_heading">⟱ Filter by category
</h2>
</div>
<div class="filter_lists">
<div style="display: block;" id="selection_project_category" class="tex_filter_list">
<ul class="filter-checkbox-list">
<li class="filter-labels-list-element">
<input class="tex-filter-checkbox-project_category" id="natural-resources" name="natural-resources" value="natural-resources" type="checkbox">
<label class="filter-labels" for="natural-resources">Natural Resources
</label>
</li>
</ul>
</div>
</div>
</div>
<div id="filter-div-project_location" class="tex-filter-div">
<div class="filter_category">
<h2 style="text-align: center;" id="filter_category_heading_project_location" class="filter_category_heading">⟱ Filter by location
</h2>
</div>
<div class="filter_lists">
<select id="selection_project_location" name="project_location" multiple="multiple" class="tex_filter_list">
<option class="tex-filter-option" value="boston">Boston
</option>
<option class="tex-filter-option" value="boulder">Boulder
</option>
</select>
</div>
</div>
<div id="filter-div-project_status" class="tex-filter-div">
<div class="filter_category">
<h2 id="filter_category_heading_project_status" class="filter_category_heading">⟱ Filter by status
</h2>
</div>
<div class="filter_lists">
<div style="display: block;" id="selection_project_status" class="tex_filter_list">
<ul class="filter-checkbox-list">
<li class="filter-labels-list-element">
<input class="tex-filter-checkbox-project_status" id="complete" name="complete" value="complete" type="checkbox">
<label class="filter-labels" for="complete">Complete
</label>
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>