0

我正在尝试让导航栏和搜索图标（使用 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;
}
4

1 回答 1

0

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

.main-navigation {
    float: left;
    width: 80%;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}
于 2017-08-07T21:50:01.533 回答