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

中心菜单基于宽度

1 个答案: