html - 样式内联问题

Question

我正在尝试在一行中设计样式 - 左侧的一组按钮，中间的导航列表和右侧的一组按钮。我已经将导航按钮分组，以便在布局发生变化时使用。问题是如何让导航结构在父元素的中心在同一行？

我已将总体 div 元素和导航元素都变成了“显示:内联”元素。

• 我是否需要使用导航的绝对定位才能工作？为什么？

• 如何使导航水平居中？

我的 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>

Answer 1

您不需要使用position: absolute。您可以使用 flexbox 实现这一点。

只需在包装器 (#header_topnav) 上添加 display:flex 并在中间菜单上添加 flex-grow: 1。这样菜单将占据左右按钮之间的所有可用空间。

此外，在 SO 上共享代码时，请确保您共享有效代码。

• HTML 代码缺少一些结束标记
• // 不是 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>