[英]CSS percent layout missizing
I am creating an HTML element with 4 elements in side of it. 我正在创建一个HTML元素,其中包含4个元素。 To accomplish this, the parent element is a
<ul>
and each of the 4 elements are <li>
. 为此,父元素是
<ul>
,而4个元素中的每个元素都是<li>
。 The inner elements should take up a quarter of the hight and all of the width minus padding of the parent, so I gave the parent a definative size in px and the children are set with %. 内部元素应该占父元素的高度的四分之一,并且所有宽度减去父元素的填充,因此我给父元素指定了以px为单位的大小,并且子元素设置为%。 But instead the children end up only taking up half of the total space, why?
但是相反,孩子最终只占总空间的一半,为什么呢?
HTML 的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 的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%;
}
You've set the height of the buttons to 25%, which means they're trying to take up 25% of the height of their parent li
tags. 您已将按钮的高度设置为25%,这意味着它们正尝试占用其父
li
标签高度的25%。 Set the height of the li
tags to 25% and set the children (buttons etc.) to height: 100%
(100% of the 25% - aka 25% of the red container). 将
li
标签的高度设置为25%,并将子项(按钮等)设置为height: 100%
(25%的100%-红色容器的25%)。
Something like this: http://jsfiddle.net/45Y4Z/ (you'll have to fix the search bit) 这样的东西: http : //jsfiddle.net/45Y4Z/ (您必须修复搜索位)
Side note: I can already predict you're going to hit a problem whereby you have an element that's 100% wide and you add say a 3 pixel border, the width becomes 100% + 6px (too wide!). 旁注:我已经可以预测您会遇到一个问题,即您拥有一个100%宽的元素,并添加了3像素边框,宽度变为100%+ 6px(太宽!)。 You'll probably want to solve this with the following css:
您可能需要使用以下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+ */
Here is an excellent explanation of how that works: http://css-tricks.com/box-sizing/ 这是有关其工作原理的出色解释: http : //css-tricks.com/box-sizing/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.