css - CSS：如何固定垂直菜单的宽度？

Question

我正在尝试使每个 li 项目的宽度完全相同。例如，如果有一个长文本 ul使其余的ul大小相同或具有有限的宽度大小，因此最长的ul可以分成两行。

请参阅黄色的左栏菜单。这就是我所拥有的：

这就是我的目标：

CSS

#menu-esde li a {
    background-color: #FFC477;
    border: 1px solid white;
    color: #FFFFFF;
    float: right;
    font-size: 20px !important;
}
#secondnav li a, #menu-esde li a {
    background-color: #FFC477;
    border: 1px solid white;
    color: #FFFFFF;
    float: right;
    font-size: 20px !important;
}
#secondnav li a {
    border: medium none;
    display: block;
    padding: 3px 8px;

网站： http ://npmaudiovisual.com/esde/?page_id=36

Answer 1

CSS只需用我的CSS更新你的：-

#secondnav li a, #menu-esde li a {
    background-color: #FFC477;
    border: 1px solid white;
    color: #FFFFFF;
    float: right;
    font-size: 20px !important;
    text-align: left;
    width: 205px;
}

请参阅所附图像结果是否符合您的要求：-

Answer 2

刚刚添加这个css

#secondnav ul li {
    overflow: hidden;
    width: 184px;
}

    #secondnav li a, #menu-esde li a {
        display: block;
        text-align: left;
float:right; // remove this line 
    }

Answer 3

ul#menu-esde li {
    border-bottom: 1px solid #YOUR COLOR;
    height: 42px;
    list-style: none outside none;
    width: 100%;
}
ul#menu-esde li a {
    background-color: #YOUR COLOR;
    color: #YOUR COLOR;
    display: block;
    font-weight: bold;
    line-height: 42px;
    padding: 0 20px;
    text-decoration: none;
}