Question

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

假设我有导航图层（高40像素，宽度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>

我希望所有按钮的高度为30px，字体大小：14px;和border-radius：5px; 并搜索输入和提交按钮（输入 - 高度30px; border-radius：5px 0 0 5px;提交 - 高度30px; border-radius：0 5px 5px 0;）

有没有办法让它们显示在一条相等的线上？

非常感谢

Answer 1

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

Answer 2

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

first

<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>

带搜索字段的CSS菜单 - Chrome，FF和IE

2 个答案: