我的标记结构如下:
<div id="outerdiv">
<div>
Some text <select>...options...</select>
</div>
<div>
<input><label><input><label>...
</div>
<div>
Some text <select>...otions...</select>
</div>
</div>
文本为粗体,
select
标记具有默认样式,label
标记的样式如下所示,所有标记都占用页面空间。(input
有display:none
)但是除非#outerdiv
被显式地指定了高度,否则它将折叠;如果应用1px边框,则它将生成一条水平直线,其他样式的元素将从中显示为“挂起”为什么会发生这种事?
编辑:所有内部div都向左浮动,标签的样式如下:
.CheckLabels{
display: inline-block;
width: 7%;
height: 45px;
}
据我所知,没有应用其他相关样式。
最佳答案
select、input和label元素是否具有height属性?
若要声明“height”,元素必须是display:“block”或“inline block”-
.thing {
display: block; /* or */
display: inline-block;
height: 20px; /* 95% of the time.. you should NOT declare a height */
/* but this will work */
}
(真正的问题)
为什么当我浮动父元素的子元素时它会崩溃?
当你“浮动”元素时,它会把它们从传统的流程中去掉,所以你必须使用“清除修正”
您还可以使用
overflow: hidden;
或边框将其重新设置为顺序。溢出隐藏过去有一些副作用。。。但我不认为这是一个担心这些天。。。.parent {
background: lightgreen;
overflow: hidden; /* but really - you should use a clearfix */
}
.parent div {
width: 100%;
float: left;
}
<section class="parent">
<div>
Some text
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div>
<label for="thing-1">Input label</label>
<input type="text" id="thing-1">
</div>
<div>
Some text
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</section>