如何将导航项目均匀拉伸到容器的宽度

Question

我在容器中有一个简单的菜单位置，宽度为100％但ul宽度设置为max-width: 1100px;，在菜单的最后一个元素的右侧留出空间。

如何将菜单均匀拉伸到容器的宽度。

https://codepen.io/anon/pen/oqOGLL

.container{ width:100%; background-color: #f00;}
.mm-nav-wrap {
	max-width: 1100px;
	margin: 0 auto;
	height:35px;
}
.mm-main-nav {
	display: block;
	width: 100%;
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	font-weight: 400;
	background-color: green;
	height:35px;
}
ul, ol {
	padding: 0px;
}
ol, ul {
	margin-top: 0;
	margin-bottom: 10px;
}
.mm-main-nav li {
	list-style-type: none;
	display: inline;
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}
.mm-main-nav li a {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	display: block;
	padding: 8px 13px 1px 13px;
	text-decoration: none;
	color: #111;
	position: relative;
	border-bottom: 5px solid transparent;
}

<div class="container">
<div class="mm-nav-wrap">
            <ul class="mm-group mm-main-nav">
                <li> <a href="#" class="mm-nav-item"> HOME  </a> </li>
                <li> <a href="#" class="mm-nav-item"> ABOUT US  </a> </li>
                <li> <a href="#" class="mm-nav-item"> MENU ONE  </a> </li>
                <li> <a href="#" class="mm-nav-item"> MENU TWO  </a> </li>
                <li> <a href="#" class="mm-nav-item"> MENU THREE  </a> </li>
                <li> <a href="#" class="mm-nav-item"> FOUR  </a> </li>
                <li> <a href="#" class="mm-nav-item"> MENUFIVE  </a> </li>
                <li> <a href="#" class="mm-nav-item"> SIX  </a> </li>
                <li> <a href="#" class="mm-nav-item"> SEVEN  </a> </li>
                <li> <a href="#" class="mm-nav-item"> CONTACT US  </a> </li>
            </ul>
   </div>
     </div>

Answer 1

您可以使用display: table和display:table-cell属性在设计中实现所需。试试这段代码。

.mm-main-nav {
  display: table;
  table-layout: fixed;
}
.mm-main-nav li {
    list-style-type: none;
    display: table-cell;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}

但是，如果您不需要所有菜单项的宽度相等，则可以删除table-layout: fixed;