代码之家 › 专栏 › 技术社区 › å°çåªè²´

搜索图标按钮未出现

css html

å°çåªè²´ · 技术社区 · 9 月前

我正在开发一个网站。总共有4页。只有一个页面显示搜索按钮图标,其他页面不显示。我是编码的初学者,无法找出问题所在。

.search-container button{
    float: right;
    padding: 6px 10px;
    margin-top: 8px;
    margin-right: 16px;
    background: #ddd;
    font-size: 20px;
    border: none;
    cursor: pointer;
}

<div class="mobileMenuContainer">
                    <input type="checkbox" class="toggler">
                <div class="mobileButtonStyle hamburger perfectCenter"><div></div></div>
                <div class="modal mobileMenu">
                
                <div class="search-container">
                    <form>
                        <input type="text" placeholder="Search" name="search">
                        <button type="submit"><i class="fa fa-search"></i></button>
                    </form>
                </div>
</div>

search button is not appear this is the only 1 page that could show search button icon

我认为这是html编码问题,因为其中一个可以正确显示图标。但我无法找出问题所在。

1 回复 | 直到 9 月前

LF-DevJourney 9 月前

您的按钮没有值,因此它导致按钮宽度为0。只需为按钮添加一些值。例如 <button type="submit">click me<i class="fa fa-search"></i></button>

.search-container button{
    float: right;
    padding: 6px 10px;
    margin-top: 8px;
    margin-right: 16px;
    background: #ddd;
    font-size: 20px;
    border: none;
    cursor: pointer;
}

<div class="mobileMenuContainer">
                    <input type="checkbox" class="toggler">
                <div class="mobileButtonStyle hamburger perfectCenter"><div></div></div>
                <div class="modal mobileMenu">
                
                <div class="search-container">
                    <form>
                        <input type="text" placeholder="Search" name="search">
                        <button type="submit">click me<i class="fa fa-search"></i></button>
                    </form>
                </div>
</div>