我嘗試創(chuàng)建一個類似谷歌的搜索欄。我寫了下面的HTML:

<div id="settings-menu">
    <div class="search">
        <div class="search-icon"><i class="fi-xwluhl-magnifying-glass-wide"></i></div>
            <div class="input">
                <input type="text" placeholder="Search" id="settings-search">
            </div>
        <span class="clear interactive"><i class="fi-xwluxl-times-wide"></i></span>
    </div>
</div>

下面是輸入元素的CSS:

#settings-menu input {
    width: 100%;
    height: 100%;
    border: none;
    font-size: 16px;
    background-color: var(--main-bg-color);
    color: var(--main-color);
}

結(jié)果如下:

我不明白為什么輸入會溢出家長。 這里是JSfiddle的完整代碼:https://jsfiddle.net/Imabot/ub4y7w8f/

歡迎任何幫助(和解釋)!

這是因為您的框大小設(shè)置為內(nèi)容框。將它設(shè)置為邊框?qū)⑿迯痛笮栴}

*, ::before, ::after {
  box-sizing: border-box;
}

這是因為默認情況下，input元素有一個垂直填充?？虼笮≡O(shè)置為content-box將填充添加到高度值。這使得elemen t的總高度為100% +導致溢出的填充。你可以在這里閱讀更多關(guān)于盒子大小的信息。

如果您不想更改框的大小，您可以依靠flexbox來正確對齊內(nèi)容:

#settings-menu .search {
  align-items: center;
}

通過將flex子對象居中對齊，輸入將不會溢出，并將被正確定位