繁体   English   中英

CSS百分比布局错误

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM