带有搜索字段的 CSS 菜单 - Chrome、FF 和 IE答案

【问题标题】：CSS menu with search field - Chrome, FF and IE带有搜索字段的 CSS 菜单 - Chrome、FF 和 IE
【发布时间】：2012-03-30 06:14:14
【问题描述】：

我想在 CSS 中创建一个漂亮的、本质上简单的菜单。在 chrome 中它看起来不错，但在 ff 中它看起来很糟糕。

假设我有导航层（40px 高度，宽度 100%）：

<nav id="navbar">
<div class="main-navigation">
    <ul> (list-style:none;)
        <li><a href="#">Home</a></li>
        <li><a href="#">Page1</a></li>
        <li><a href="#">Page2</a></li>
        <li><a href="#">Page3</a></li>
        <li><a href="#">Page4</a></li>
    </ul>
    <div class="search">
        <form method="get" action="">
            <input type="text" name="q" class="search-input" placeholder="Type here" />
            <input type="submit" class="search-btn" value="Search" />
        </form>
    </div>
</div>
</nav>

我希望所有按钮的高度为 30 像素，字体大小：14 像素；和边框半径：5px；并搜索输入和提交按钮（输入 - 高度 30px；边框半径：5px 0 0 5px；提交 - 高度 30px；边框半径：0 5px 5px 0;）

有什么方法可以将它们定位在一条相等的行中？

非常感谢

【问题讨论】：

如何创建一个 jsFiddle 来说明您遇到的问题？
link在这个例子中高度是36px，在ff中搜索div的高度不同

标签： css menu

【解决方案1】：

内联块是您最好的选择。这是思想上的一个小调整，但非常值得。 Re-fiddled

【讨论】：

【解决方案2】：

试试这个。这是一篇非常好的文章。它很容易依靠 flex box 来实现良好的设计。

https://www.freecodecamp.org/news/you-just-need-to-know-these-properties-to-start-loving-css-a06aca6087e9

<style>
    nav {

        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }
    nav a {
        display: inline-block;
        padding: 10px;
    }
    nav a:hover {
        color: red;
        cursor: pointer;
    }

    div.search {
        display: inline-block;
        color: red;


    }

    input.search-input {
        padding: 10px;
    }

    input.search-btn {
        padding: 10px !important;
        background-color: grey;
        border: 2px solid black;
        color: white;

        box-sizing:border-box;
    }
</style>
<nav id="navbar">

    <div>
        <a>Button 1</a>
        <a>Button 1</a>
        <a>Button 2</a>
        <a>Button 1</a>
    </div>
    <div class="search">
        <form method="get" action="">
            <input type="text" name="q" class="search-input" placeholder="Type here" />
            <input type="submit" class="search-btn" value="Search" />
        </form>
    </div>
    <div>
        <a>Sign up</a>
    </div>

</nav>

【讨论】：