[英]CSS percent layout missizing
我正在创建一个HTML元素,其中包含4个元素。 为此,父元素是<ul>
,而4个元素中的每个元素都是<li>
。 内部元素应该占父元素的高度的四分之一,并且所有宽度减去父元素的填充,因此我给父元素指定了以px为单位的大小,并且子元素设置为%。 但是相反,孩子最终只占总空间的一半,为什么呢?
的HTML
<ul class="content_selection_container">
<li>
<form name="search_form" class="search_form" id="FORM_3">
<input type="text" name="search_input" class="search_bar" />
<input type="submit" value="🔍" class="search_button" name="search_button"/>
</form>
</li>
<li>
<button class="content_selection_button">
My Timeline
</button>
</li>
<li>
<button class="content_selection_button">
relevent
</button>
</li>
<li>
<button class="content_selection_button">
mentions
</button>
</li>
</ul>
的CSS
content_selection_container{
background-color:red;
padding: 5px;
height: 150px;
width: 300px;
}
.search_form{
height: 25%;
width: 100%;
display: inline-block;
}
.content_selection_button{
width: 100%;
height: 25%;
border: 1px;
}
.search_bar{
background-color:white;
box-shadow: rgb(204, 204, 204) 0px 0px 0px 1px inset;
border: 1px solid rgb(178, 210, 203);
border-radius: 8px;
font-size: 12px;
height: 100%;
width: 90%;
}
.search_button {
cursor: pointer;
border: 1px;
background-color: #d4d4d4;
font-family: 'EntypoRegular';
color: #5f615c;
font-size: 20px;
height: 100%;
width: 10%;
}
您已将按钮的高度设置为25%,这意味着它们正尝试占用其父li
标签高度的25%。 将li
标签的高度设置为25%,并将子项(按钮等)设置为height: 100%
(25%的100%-红色容器的25%)。
这样的东西: http : //jsfiddle.net/45Y4Z/ (您必须修复搜索位)
旁注:我已经可以预测您会遇到一个问题,即您拥有一个100%宽的元素,并添加了3像素边框,宽度变为100%+ 6px(太宽!)。 您可能需要使用以下CSS解决此问题:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
这是有关其工作原理的出色解释: http : //css-tricks.com/box-sizing/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.