html - 如何在 html 中划分 3 个相等的部分 li

Question

你好，在下面的代码中，如何将空间划分为所有元素列表，它应该居中。 除了首页如何分成3等份

预期输出: 主页 |关于 |服务

    #section ul {
    	width: 1050px;
    	margin: 1px auto 0 auto;
    	height: 50px;
    	padding: 0;
    	float: relative;
    	border-style: solid;
        border-width: 1px;
    	background-color: #556B2F;
    }

    #section ul li {
    	position: relative;
    	list-style-type: none;
        display: inline;
    }

    #section li:before {
    	content: " | ";
    }

    #section li:first-child:before {
        content: none;
    }
      

    <div id="section">
    	<ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Service</a></li>
        </ul>
    </div>

Answer 1

您可以使用 display:table 和 display:table-cell 将列表项拉伸(stretch)到等宽。

#section ul {
  width: 100%;
  max-width: 1050px;
  margin: 1px auto 0 auto;
  height: 50px;
  padding: 0;
  /* float:relative*/
  /* NO Such Property */
  border-style: solid;
  border-width: 1px;
  //background-color:#556B2F;
  display: table;
  text-align: center;
}
#section ul li {
  list-style-type: none;
  display: table-cell;
  border-style: solid;
  border-width: 1px;
  vertical-align: middle;
}
#section ul li a {
display: block;
}

<div id="section">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Service</a>
    </li>
  </ul>
</div>