html - 菜单栏 - 不同宽度的链接以填充菜单栏的流体宽度

Question

我有一个最大宽度为 900 像素的导航/菜单栏。导航栏内有五个链接:

        <nav>
            <ul>
                <li><a href="workshops.html">Workshops</a></li>
                <li><a href="production-workshop.html">Production workshop</a></li>
                <li><a href="about-us.html">About us</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="contact-us.html">Contact us</a></li>
            </ul>   
        </nav>

我通常会将五个链接的宽度设置为 20%，以填充导航栏的宽度并保持流畅。

但是，由于链接文本“Production workshops”与“News”的长度非常不同，我希望链接/标签的宽度基于文本。我在链接中添加了左右填充。但是现在这不是流畅的(它低于 900 像素宽度)并且我无法准确地获取链接以填充导航栏的宽度。

有没有办法让链接填充导航栏的宽度，具有灵活的宽度并且链接/标签的宽度不同(基于文本的宽度)？

JS Fiddle 链接: https://jsfiddle.net/j0g53wnu/

        <nav>
            <ul>
                <li><a href="workshops.html">Workshops</a></li>
                <li><a href="production-workshop.html">Production workshop</a></li>
                <li><a href="about-us.html">About us</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="contact-us.html">Contact us</a></li>
            </ul>   
        </nav>




nav {
    background-color:brown;
  max-width:900px;
    }
nav ul {
    font-size:21px;
    line-height:60px;
    overflow:auto;
    margin: 0;
    padding: 0;
    }

nav ul li {
    float: left;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
    }

nav a:link { color:rgb(255,255,230); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
nav a:visited { color:rgb(255,255,230); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
nav a:hover { color:rgb(51,153,51); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
nav a:active { color:rgb(51,153,51); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }

Answer 1

您可以通过许多不同的方式使其与 CSS Grid 相融合，一种快速简单的方法是这样的:

ul {
  list-style-type: none;
  display: grid;
  grid-template: ". . . . .";
 }

li {
  background-color: grey;
  text-align: center;
}

在这里您可以根据相同的示例检查工作版本: https://jsfiddle.net/j0g53wnu/4/

更改结果区域以查看它如何固定宽度。

希望这有帮助:)