Html 样式内联故障 我试图在一条线上——一组左边的按钮，中间的导航列表，右边的一组按钮。我已将导航按钮分组，以确定布局何时应更改。问题是如何使导航结构位于父元素中心的同一行上

我将两个主要的div元素都制作成了“display:inline”元素，还制作了导航

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

• 如何使导航水平居中

我的HTML：

//您需要启用字体平滑以避免模糊和锯齿线
html{
背景色：rgb（235235235）；
}
#主体{
宽度：1200px；
保证金：自动；
背景色：白色；
}
//第一行标题样式
#收割台顶部导航{
宽度：96%；
高度：适合的内容；
}
//按钮分区、导航和按钮分区
.topnav_按钮{
宽度：45px；
高度：35px；
边缘顶部：18px；
边缘底部：10px；
}
//使div内联元素位于一行上
#左按钮{
显示：内联；
位置：相对位置；
}
//使div内联元素位于一行上
//除了用左键或边距外别无选择
#右键{
显示：内联；
位置：相对位置；
左缘：87.5%；
//左：86.5%；
}
//垂直定心
保险商实验室{
保证金：自动；
}
//用于水平导航菜单
李{
显示：内联；
浮动：左；
左边距：10px；
}
//显示块，使可点击区域更大
李阿{
显示：块；
}
//如何水平居中？
//我必须使位置绝对吗？我不能把它放在两个按钮之间吗？
#顶部菜单{
位置：绝对位置；
显示：内联；
利润上限：28px；
}

F+
政治

您不需要使用

位置：绝对

。您可以通过flexbox实现这一点

只需在包装器上添加

display:flex

（

#header_topnav

）和中间菜单上的

flex grow:1

。这样，菜单将占据左右按钮之间的所有可用空间

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

• HTML代码缺少一些结束标记

• /

  在CSS中不是有效的注释。改用

  /*注释*/

见下文

html{
背景色：rgb（235235235）；
}
#主体{
宽度：100%；
保证金：自动；
背景色：白色；
}
#收割台顶部导航{
高度：适合的内容；
显示器：flex；
柔性包装：包装；
弯曲方向：行；
}
.topnav_按钮{
宽度：45px；
高度：35px；
边缘顶部：18px；
边缘底部：10px；
}
#左按钮{
显示：内联；
位置：相对位置；
}
#右键{
位置：相对位置；
}
保险商实验室{
保证金：自动；
显示器：flex；
弯曲方向：行；
}
李{
左边距：10px；
}
李阿{
显示：块；
}
#顶部菜单{
利润上限：28px；
柔性生长：1；
显示器：flex；
对齐项目：居中；
}

F+
政治