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

Question

我有一个最大宽度为900px的导航/菜单栏。在导航栏内有五个链接：

        <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％，以填充导航栏的宽度和流体。

但是，由于链接文本与"新闻"相比具有非常不同的"生产研讨会"，因此我希望链接/选项卡的宽度基于文本。我在链接中添加了左右填充。但是现在这不是流体（它会突破900px的宽度），我无法准确获取链接以填充NAV栏的宽度。

是否有一种方法可以使链接填充导航栏的宽度，具有灵活的宽度，并且链接/选项卡的宽度有所不同（基于文本的宽度）？

js小提琴的链接：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网格融合，一种快速简单的方法就是这样：

ul {
  list-style-type: none;
  display: grid;
  grid-template: ". . . . .";
 }
li {
  background-color: grey;
  text-align: center;
}

在这里，您可以基于同一示例检查工作版本：https://jsfiddle.net/j0g53wnu/4/

更改结果区域以查看其固定宽度的方式。

希望这个帮助：）

Answer 2

您是否考虑过flexbox？

刚刚改变了一点，包括屈曲增长（允许物品的不同尺寸。）

nav ul {
	font-size:21px;
	line-height:60px;
	overflow:auto;
	text-align: center;
	display: inline-block;
	margin: 0;
	padding: 0;
  display:flex;
  box-sizing:border-box;
	}
nav ul li {
  flex-grow:2;
	text-align: center;
	list-style: none;
	}

Answer 3

1）将此代码添加到级联样式表文件

.display-flex {
  display:flex;
}
.fill {
  fill:1 1 auto!important
}

2）添加class display-flex中ul标签

<ul class="display-flex"></ul>

3）将类填充到每个Li标签

<li class="fill"></li>

如果您需要另一个解决方案，您可以通过电子邮件和我一起来