在多行上水平对齐ul中的li

Question

我有一个包含多个列表项的菜单： JS Fiddle

我的目标是在列表项目上进行动态调整，也可以在两行或多行时对齐。

就像单词中的中心按钮一样。当我对<li>元素进行文本处理时，它只是将其与<li>本身对齐。当我在margin: 0 auto上<li>时，就会突破8行。

它应该像：

有没有办法实现这个目标？

Answer 1

使用父样式

{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

Answer 2

这里是一个更新的小提琴。 https://jsfiddle.net/bw5jw92L/1/

您需要将text-align:center添加到包含UL，并从LI删除浮动并添加display:inline-block。

以下是更改：

.TopMenuBlock .topCMSListMenuUL {
  font-size: 18px;
  margin: 0;
  font-weight: 600px;
  padding: 0;
  list-style: none;
  padding-top: 115px;
  margin: 0 auto;
  width: 68%;
  text-align:center;
}

.topCMSListMenuLI, .topCMSListMenuHighlightedLI, .topCMSListMenuLILast, .topCMSListMenuHighlightedLILast {
  position: relative;
  display:inline-block;
}

Answer 3

正如其他人所提到的，你可以设置li来显示：inline;，或者向左或向右浮动li。此外，您还可以使用display：flex;在ul。在下面的代码片段中，我还添加了justify-content：space-around以增加间距。

有关flexbox的更多信息，请查看完整指南。

＆＃13;

＆＃13;

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}

＆＃13;

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;