在下面给出的代码中,我试图将导航栏对准导航栏的中心,但是它不起作用。如何在导航栏中心对齐搜索栏:
#navbar {
width: 100%;
height: 50px;
background-color: aqua;
}
a {
text-decoration: none;
color: black;
font-size: 1.3em;
}
#search {
display: inline-block;
margin: 0 auto;
}
#faviorites {
float: right;
}
<nav id="navbar">
<a id="home" href="/">Home</a>
<input type="text" id="search" placeholder="Search Here">
<a href="fav.html" id="faviorites">Faviorites</a>
</nav>
答案 0 :(得分:1)
只需将display:flex;
添加到#navbar
。
#navbar {
width: 100%;
height: 50px;
display:flex;
background-color: aqua;
}
a {
text-decoration: none;
color: black;
font-size: 1.3em;
}
#search {
display: inline-block;
margin: 0 auto;
}
#faviorites {
float: right;
}
<nav id="navbar">
<a id="home" href="/">Home</a>
<input type="text" id="search" placeholder="Search Here">
<a href="fav.html" id="faviorites">Faviorites</a>
</nav>
如果您想水平和垂直居中,请使用:
#navbar {
width: 100%;
height: 50px;
display:flex;
justify-content:center;
align-items:center;
background-color: aqua;
}
答案 1 :(得分:0)
最简单的方法是使用弹性框并为水平间距定义space-between
。
#navbar {
width: 100%;
height: 50px;
background-color: aqua;
display: flex;
justify-content: space-between;
}
a {
text-decoration: none;
color: black;
font-size: 1.3em;
}
<nav id="navbar">
<a id="home" href="/">Home</a>
<input type="text" id="search" placeholder="Search Here">
<a href="fav.html" id="faviorites">Faviorites</a>
</nav>
答案 2 :(得分:0)
您可以使用flexbox轻松完成
将这3个 添加到您的#navbar
中,这是必需的。
#navbar {
display: flex;
justify-content: space-between;
align-items: flex-start;
/*your current styles*/
}