我正在创建一个带有水平菜单的主题，该菜单动态拉伸以填充容器元素。我使用wp\\u nav\\u menu（）从后端获取菜单，并通过CSS设置其样式。以下是一些代码：

        <?php wp_nav_menu(
            array( 
                \'theme_location\' => \'headerNavMenu\', 
                \'menu_class\' => \'headerNavMenu\',
                \'container_id\' => \'headerNavMenu\'
            )
        ); ?>

        <div class="headerNavMenu">
          <ul>
            <li class="page_item page-item-7"><a href="http://localhost/wordpress/site1/">site1</a></li>
            <li class="page_item page-item-17"><a href="http://localhost/wordpress/site2/">site2</a></li>
            <li class="page_item page-item-14"><a href="http://localhost/wordpress/site3/">site3</a></li>
            <li class="page_item page-item-10"><a href="http://localhost/wordpress/site4/">site4</a></li>
          </ul>
        </div>

第一段是原始代码，第二段是PHP函数的输出。唯一的区别是为了便于阅读，我添加了换行符。CSS：

.headerNavMenu {
   width: 100%;
   border: 1px #a2a2a2 solid;
}

.headerNavMenu ul {
    text-align: justify;
    line-height: 0;
    margin: 0;
    padding: 0;
    width: 90%;
    list-style-type: none;
   list-style-image: none;
   margin-left:auto;
   margin-right:auto;

}

.headerNavMenu ul::after {
  content: \'\';
  width: 100%; /* Ensures justification for single lines */
  display: inline-block;
}

.headerNavMenu li {
   display: inline;
   line-height: 100%;   
}

CSS同样应用于代码的两个部分，但只有第二部分正确显示。第一部分是左对齐的，所有链接都是相邻的，没有任何边距。我能检测到的代码中唯一的区别是换行符。我该如何解决这个问题？

提前感谢！

.headerNavMenu {
    width: 100%;
    display: table;
    text-align: center;
    margin: 0;
}

.headerNavMenu ul {
    display: table-row;
}

.headerNavMenu li {
    display: table-cell;
    margin: 0;
}