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％，以填充导航栏的宽度并保持流畅。

但是，由于链接文本的长度与“新闻”相比，“生产车间”的长度非常不同，因此我希望链接/选项卡的宽度基于文本。我已经在链接中添加了左右填充。但这现在不流畅（它的宽度低于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

您是否考虑过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 2

您可以通过多种方法使它与CSS Grid一起使用，一种快速简便的方法将是这样的：

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

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

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

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

希望获得帮助：）

Answer 3

1）将此代码添加到Cascade样式表文件中

.display-flex {
  display:flex;
}

.fill {
  fill:1 1 auto!important
}

2）将类display-flex添加到UL标签

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

3）在每个Li标签上添加课程填充

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

如果您需要其他解决方案，你可以通过电子邮件跟我来

菜单栏-不同宽度的链接可填充菜单栏的宽度

3 个答案: