CSS: 右对齐导航栏和搜索框/图标在同一行
CSS: Right aligning navbar and search box / icon together on same row
我正在尝试让导航栏和搜索图标(使用 CSS3,向外扩展以显示搜索输入框)彼此相邻对齐并出现在我容器的右侧/ div。左对齐没有问题。权利是问题。这是当前代码,也在 https://codepen.io/anon/pen/KmgoqE and here's the webpage in question: 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 …" 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;
}
在父项上使用 flex
,justify-content: flex-end;
将项目向右移动,align-items: baseline
垂直对齐菜单和图标。
.main-navigation {
float: left;
width: 80%;
display: flex;
justify-content: flex-end;
align-items: baseline;
}
我正在尝试让导航栏和搜索图标(使用 CSS3,向外扩展以显示搜索输入框)彼此相邻对齐并出现在我容器的右侧/ div。左对齐没有问题。权利是问题。这是当前代码,也在 https://codepen.io/anon/pen/KmgoqE and here's the webpage in question: 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 …" 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;
}
在父项上使用 flex
,justify-content: flex-end;
将项目向右移动,align-items: baseline
垂直对齐菜单和图标。
.main-navigation {
float: left;
width: 80%;
display: flex;
justify-content: flex-end;
align-items: baseline;
}