将搜索栏与导航中的其他元素对齐
Aligning Search bar with other elements in the nav
我之前问过一个关于将导航栏最右侧的搜索栏移动的问题,按照答案我确实成功地将它移到了右边,但是现在搜索栏与另一个不一致元素(以前是)。哪个 CSS 属性(如果有)阻止了它的发生,解决方案是什么?
代码:
body
{
margin: 0;
background: #222;
font-weight: 300;
background-image: url('logo.jpeg');
}
.container
{
width: 80%;
margin: 0 auto;
}
header
{
background: #f3e5ab;
position: relative;
}
header::after
{
content: '';
display: table;
clear: both;
}
nav
{
float: left;
}
nav ul
{
margin: 0;
padding: 0;
list-style: none;
}
nav li
{
display: inline-block;
margin-left: 70px;
padding-top: 30px;
position: relative;
}
nav ul li a
{
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover
{
}
nav a::before
{
content: '';
display: block;
height: 5px;
width: 0%;
background-color: #444;
transition: all ease-in-out 500ms;
}
nav a:hover::before
{
width: 100%;
}
form .form
{
float: right;
}
.search-bar
{
float: right;
}
ul li:last-child
{
position: absolute;
right: 0;
top: 0;
margin: 15px;
padding: 0;
}
<header>
<div class="container">
<nav>
<ul>
<li> <a href="#"> Home </a></li>
<li> <a href="#"> About </a></li>
<li> <a href="#"> Services </a></li>
<li> <a href="#"> Products </a></li>
<li> <a href="#"> Contact Us </a></li>
<li> <form class="form"> <input type="text" name="Search" placeholder="Search"> </form> </li>
</ul>
</nav>
</div>
</header>
就您选择的总体布局和方法而言,我不能说我在同一页上,但这是一个快速修复(如果我理解正确您的问题)
https://codepen.io/magom001/pen/mXwovO?editors=1100
body
{
margin: 0;
background: #222;
font-weight: 300;
background-image: url('logo.jpeg');
}
.container
{
width: 80%;
margin: 0 auto;
}
.container::after {
content: '';
displayt: table;
clear: both;
}
header
{
background: #f3e5ab;
position: relative;
}
header::after
{
content: '';
display: table;
clear: both;
}
nav
{
float: left;
}
nav ul
{
margin: 0;
padding: 0;
list-style: none;
}
nav li
{
display: inline-block;
margin-left: 70px;
padding-top: 30px;
position: relative;
}
nav ul li a
{
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover
{
}
nav a::before
{
content: '';
display: block;
height: 5px;
width: 0%;
background-color: #444;
transition: all ease-in-out 500ms;
}
nav a:hover::before
{
width: 100%;
}
form .form
{
float: right;
}
.search-bar
{
float: right;
}
ul li:last-child
{
position: absolute;
right: 0;
bottom: 0;
margin: 15px;
margin-bottom: 0px;
padding: 0;
}
只需将 top:0 更改为 bottom: 0 并删除 last-child 上的 margin-bottom。
我之前问过一个关于将导航栏最右侧的搜索栏移动的问题,按照答案我确实成功地将它移到了右边,但是现在搜索栏与另一个不一致元素(以前是)。哪个 CSS 属性(如果有)阻止了它的发生,解决方案是什么?
代码:
body
{
margin: 0;
background: #222;
font-weight: 300;
background-image: url('logo.jpeg');
}
.container
{
width: 80%;
margin: 0 auto;
}
header
{
background: #f3e5ab;
position: relative;
}
header::after
{
content: '';
display: table;
clear: both;
}
nav
{
float: left;
}
nav ul
{
margin: 0;
padding: 0;
list-style: none;
}
nav li
{
display: inline-block;
margin-left: 70px;
padding-top: 30px;
position: relative;
}
nav ul li a
{
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover
{
}
nav a::before
{
content: '';
display: block;
height: 5px;
width: 0%;
background-color: #444;
transition: all ease-in-out 500ms;
}
nav a:hover::before
{
width: 100%;
}
form .form
{
float: right;
}
.search-bar
{
float: right;
}
ul li:last-child
{
position: absolute;
right: 0;
top: 0;
margin: 15px;
padding: 0;
}
<header>
<div class="container">
<nav>
<ul>
<li> <a href="#"> Home </a></li>
<li> <a href="#"> About </a></li>
<li> <a href="#"> Services </a></li>
<li> <a href="#"> Products </a></li>
<li> <a href="#"> Contact Us </a></li>
<li> <form class="form"> <input type="text" name="Search" placeholder="Search"> </form> </li>
</ul>
</nav>
</div>
</header>
就您选择的总体布局和方法而言,我不能说我在同一页上,但这是一个快速修复(如果我理解正确您的问题)
https://codepen.io/magom001/pen/mXwovO?editors=1100
body
{
margin: 0;
background: #222;
font-weight: 300;
background-image: url('logo.jpeg');
}
.container
{
width: 80%;
margin: 0 auto;
}
.container::after {
content: '';
displayt: table;
clear: both;
}
header
{
background: #f3e5ab;
position: relative;
}
header::after
{
content: '';
display: table;
clear: both;
}
nav
{
float: left;
}
nav ul
{
margin: 0;
padding: 0;
list-style: none;
}
nav li
{
display: inline-block;
margin-left: 70px;
padding-top: 30px;
position: relative;
}
nav ul li a
{
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover
{
}
nav a::before
{
content: '';
display: block;
height: 5px;
width: 0%;
background-color: #444;
transition: all ease-in-out 500ms;
}
nav a:hover::before
{
width: 100%;
}
form .form
{
float: right;
}
.search-bar
{
float: right;
}
ul li:last-child
{
position: absolute;
right: 0;
bottom: 0;
margin: 15px;
margin-bottom: 0px;
padding: 0;
}
只需将 top:0 更改为 bottom: 0 并删除 last-child 上的 margin-bottom。