Question

我试图获得一个导航栏和搜索图标（使用CSS3，向外展开以显示搜索输入框），以便彼此对齐并显示在我的容器/ div的右侧。左对齐没有问题。问题是对的。这是当前代码，也是https://codepen.io/anon/pen/KmgoqE，这里是相关网页：http://vps30689.inmotionhosting.com/~myclar5/

HTML

<header id="masthead" class="site-header">
    <nav id="site-navigation" class="main-navigation">
                <div class="menu-nav-container">
          <ul id="primary-menu" class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          </div>
        <form role="search" method="get" class="search-form" action="http://vps30689.inmotionhosting.com/~myclar5/">
                <label>
                    <span class="screen-reader-text">Search for:</span>
                    <input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" />
                </label>
                <input type="submit" class="search-submit" value="Search" />
            </form>
            </nav>
</header>

CSS

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
    display: block;
    float: left;
    width: 80%;
}
.main-navigation ul {
    list-style: none;
    margin: 30px 0 0 0;
    padding-left: 0;
}
.main-navigation li {
    float: left;
    position: relative;
}
.main-navigation a {
    color: #333d47;
    display: block;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 18px;
}
/*--------------------------------------------------------------
## Saarch Form
--------------------------------------------------------------*/
.site-header .search-field {
    background-color: transparent;
    background-image: url(http://vps30689.inmotionhosting.com/~myclar5/wp-content/themes/clarity/img/search-icon.png);
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: none;
    cursor: pointer;
    height: 37px;
    margin: 0;
    padding: 0 0 0 34px;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition:         width 400ms ease, background 400ms ease;
    width: 0;
}
.site-header .search-field:focus {
    background-color: #fff;
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 230px;
}
.search-form
.search-submit { 
    display:none;
}

Answer 1

在父级上使用flex，在justify-content: flex-end;上移动项目，然后align-items: baseline将菜单和图标垂直对齐。

.main-navigation {
    float: left;
    width: 80%;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

CSS：右键将导航栏和搜索框/图标对齐在同一行上

1 个答案: