html - 基于宽度的中心菜单

Question

我正在构建一个菜单，我正在尝试根据菜单链接是否比菜单宽或菜单是否比菜单链接宽来使菜单居中。

目前，如果我向菜单链接添加更多文本，它会自动换行。所以我需要使我的菜单可缩放，如果我向菜单链接或菜单本身添加更多更少的内容，它会相应地缩放。

HTML

<div class="menu-wrap">
    <div class="menu">
        <a href="#">this is a long menu link that wraps<i class="fa fa-chevron-down pl-1" aria-hidden="true"></i></a>
    </div>
    <div class="sau-menu"> 
        <ul>
            <li>This is a menu </li>
            <li>This is a menu item</li>
            <li>This is a menu item</li>
            <li>This is a menu item</li>
            <li>This is a menu item</li>
        </ul>
    </div>
  </div>

CSS

.menu-wrap{
     position: absolute;
}
.menu{
    position: absolute;
    z-index:3;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    width:100%;
}
.sau-menu {
    z-index:33;
    position: relative;
    top:40px;
    background: #fff;
    border: 1px solid #8e8e8e;
    color:#8e8e8e;
    display:inline-block;
    padding:20px;
    margin: 0 auto 0 auto;
    width:100%;

}

.sau-menu ul{
        list-style: none;
        padding:0;
        margin:0;
        font-size:0.9rem;
}
.sau-menu:after, .sau-menu:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.sau-menu:after {
    border-bottom-color: #fff;
    border-width: 13px;
    margin-left: -13px;
}
.sau-menu:before {
    border-bottom-color: #8e8e8e;
    border-width: 14px;
    margin-left: -14px;
}

https://jsfiddle.net/stevenSAUaa/5sfqp41d/

Answer 1

.sau-menu padding: 20px 使框比 .menu-wrap宽。

因此将box-sizing: border-box添加到.sau-menu。

JSFiddle