Question

我试图在一行上设置样式-左侧是一组按钮，中间是导航列表，右侧是一组按钮。我对导航按钮进行了分组，以决定布局应何时更改。问题是如何在父元素中心的同一行上获得导航结构？

我已经将整个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>

Answer 1

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

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

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

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>

样式内联麻烦

1 个答案: