Html 如何使用flexbox拉伸导航栏中的所有导航元素_Html_Css_Flexbox

Html 如何使用flexbox拉伸导航栏中的所有导航元素

html css

Html 如何使用flexbox拉伸导航栏中的所有导航元素,html,css,flexbox,Html,Css,Flexbox,我正在尝试使用flexbox创建导航栏。我想让flexbox中的所有元素在可用空间中水平拉伸预期的导航栏如下所示：但我的导航栏是这样的：我想你已经理解了我的导航栏在左右两侧留下太多空间的问题。我想通过拉伸所有导航链接来使用整个空间我的html代码是： <html> <head> <link rel=stylesheet href=ej42.css> </head> <body>

我正在尝试使用flexbox创建导航栏。我想让flexbox中的所有元素在可用空间中水平拉伸

预期的导航栏如下所示：

但我的导航栏是这样的：

我想你已经理解了我的导航栏在左右两侧留下太多空间的问题。我想通过拉伸所有导航链接来使用整个空间

我的html代码是：

<html>
    <head>
    <link rel=stylesheet href=ej42.css>
    </head>

    <body>
            <div><ul>
                    <a href=# >HOme</a>
                    <a href=#> about me</a>
                    <a href=#>about you</a>
                    <a href=#> about foo</a>
            </div></ul>
    </body>
 </html>

我尝试使用拉伸值来调整内容属性，但没有成功，所有链接都向左对齐。我无法按预期创建导航栏。如果你能解决我的问题，那将是非常有帮助的。我认为唯一的办法就是将这种风格运用到

a{
  display: block;
   width: 25%;
}

您可以通过flexbox实现这一点。这将自动填充空间并动态调整以适应新的导航元素

a{ 字体大小：粗体；字体系列：monospace；文字装饰：无；宽度：100%；显示：内联块；文本对齐：居中；右边框：2个实心555； } 保险商实验室{ 填充：2px；背景色：555；证明内容：之间的空间；文本对齐：居中；列表样式：无；宽度：100%；背景：红色；显示器：flex； } a:链接{ 颜色：白色； } a:参观了{ 颜色：黑色； } a:悬停{ 背景色：8d8； } a:主动的{ 位置：相对位置；排名：0；右：0；填充：7px； } 李{ 宽度：继承；边框：1px实心； }

注意以下错误：-在UL -UL的样式为A: Actudio的中间之前关闭DIV；但是Li元素是如何均匀拉伸的，其宽度被设置为继承继承其父的宽度，即100%。通过执行宽度：100%可以实现同样的效果，但是如果宽度是100%，为什么它没有占用容器中的整个空间？因为ul使用flexbox，因此flexbox将所有可用空间平均分配给其子代。FYI@user9218974，flex标记指的是Apache flex，而不是CSS flexbox模型。我继续并删除了标签-flexbox就是您想要使用的。

a{
  display: block;
   width: 25%;
}