CSS百分比布局錯誤

Question

我正在創建一個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%;
}

Answer 1

您已將按鈕的高度設置為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/