我试图在一行上设置样式-左侧是一组按钮,中间是导航列表,右侧是一组按钮。我对导航按钮进行了分组,以决定布局应何时更改。问题是如何在父元素中心的同一行上获得导航结构?
我已经将整个div元素都制成了“ display:inline”元素,还使了导航。
我是否需要使用导航的绝对定位才能正常工作?为什么?
如何将导航水平居中?
我的HTML:
// you need to have font smoothing on to avoid blurred and jagged lines
html{
background-color: rgb(235, 235, 235);
}
#main_body{
width: 1200px;
margin: auto;
background-color: white;
}
// first line header styling
#header_topnav{
width: 96%;
height: fit-content;
}
// button div, navigation and button div
.topnav_button{
width: 45px;
height: 35px;
margin-top: 18px;
margin-bottom: 10px;
}
// make div inline element to get it on one line
#left_buttons{
display: inline;
position: relative;
}
// make div inline element to get it on one line
// no other way than to go with left or margin
#right_buttons{
display: inline;
position: relative;
margin-left: 87.5%;
// left: 86.5%;
}
// vertical centering
ul {
margin: auto;
}
// for horizontal nav menu
li {
display: inline;
float: left;
margin-left: 10px;
}
// display block so clickable area is larger
li a {
display: block;
}
// how do you center this horizontally?
// do I have to make position absolute? can't I keep it in between the button sections?
#top_navmenu {
position: absolute;
display: inline;
margin-top: 28px;
}
<div id="main_body">
<header>
<section id="header_topnav">
<div id="left_buttons">
<button class="topnav_button"></button>
<button class="topnav_button"></button>
</div>
<nav id="top_navmenu">
<ul>
<li><a>F+</a></li>
<li><a>POLITIK</a></li>
</ul>
</nav>
<div id="right_buttons">
<button class="topnav_button"></button>
</div>
</section>
</header>
</div>
答案 0 :(得分:1)
您不需要使用position: absolute
。您可以使用flexbox实现这一点。
只需在包装器(display:flex
)上添加#header_topnav
并在中间菜单中添加flex-grow: 1
。这样,菜单将占据左右按钮之间的所有可用空间。
此外,在此处共享代码时,请确保您共享有效的代码。
//
在CSS中不是有效的注释。请改用/* comment */
。见下文
html {
background-color: rgb(235, 235, 235);
}
#main_body {
width: 100%;
margin: auto;
background-color: white;
}
#header_topnav {
height: fit-content;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.topnav_button {
width: 45px;
height: 35px;
margin-top: 18px;
margin-bottom: 10px;
}
#left_buttons {
display: inline;
position: relative;
}
#right_buttons {
position: relative;
}
ul {
margin: auto;
display: flex;
flex-direction: row;
}
li {
margin-left: 10px;
}
li a {
display: block;
}
#top_navmenu {
margin-top: 28px;
flex-grow: 1;
display: flex;
align-items: center;
}
<div id="main_body">
<header>
<section id="header_topnav">
<div id="left_buttons">
<button class="topnav_button"></button>
<button class="topnav_button"></button>
</div>
<nav id="top_navmenu">
<ul>
<li><a>F+</a></li>
<li><a>POLITIK</a></li>
</ul>
</nav>
<div id="right_buttons">
<button class="topnav_button"></button>
</div>
</section>
</header>
</div>