Question

很难解释，所以我创建了一个codepen供你查看。将鼠标悬停在导航项上并显示下拉菜单时。您会看到某些项目没有正确排列。即一些物品的宽度大于它们的兄弟物品。我只是希望它们都伸展到最宽的列表项的宽度。（困惑了吗？）只需看看代码笔..

enter image description here

Answer 1

您需要对以下CSS进行更改才能使它们对齐。

For Instance。

#main-navigation ul li ul li {
    background: none repeat scroll 0 0 #DE5D48;
    width: 140px;
    text-align:left;
}

<强> WORKING DEMO

希望这有帮助。

Answer 2

您应该在display : inline-block css中使用float: left而不是/* list item */，并应将display : table-row;添加到/* sub list item */。

@dark-blue:               #31394C;
@light-gray:              #E6E6E6;
@gray:                      #B1B2B5;
@dark-gray:               #6D6D6D;
@dark-red:                #d7351b; 
@red:                         #ee2a2e;
@light-red:               #f75d1f;
@dusty-red:               #DE6450;
@light-dusty-red:       #fdc29e;
@dark-dusty-red:        #b50b03;
@sub-nav-red:       #DE5D48;
@white:                     #ffffff;

@import url(http://fonts.googleapis.com/css?family=Rosario);

body {

  background: @dark-blue;

}

#main-navigation {     



  /* initial list */
  ul {

    list-style: none;    

    /* list item */
    li {

      display: inline-block;
      position: relative;
      background: @dark-red;
      min-width: 105px;
      height: 21px;
      text-align: center;
      margin-right: 10px;           

      /* link */
      a {

        color: @white;
        display: block;
        line-height: 21px;
        text-decoration: none;         
        font-family:        'Rosario', sans-serif;
          font-size:            12px;
        text-transform:     uppercase;

      }

      a:hover {

        color: @white;
        background: @dark-red;

      }           

      /* sub list */
      ul {

        position: absolute;
        top: 100%;
        left: -40px;
        display: none;
        border-top: 10px solid rgba(255, 255, 255, 0.0);
        z-index: 99;


        /* sub list item */
        li {

          background: @sub-nav-red;  
          display : table-row;
          /* sub list link */
          a {

           padding: 0 5px 0 5px;
           white-space: nowrap; 

          }

        }

      }

      ul:hover {
        display: block; 
      }


    }

     li:hover > ul {

        display: block;

     }


  }

}

Answer 3

我建议将背景，大小和位置从li移动到ul，这样如果一个项目太大，整个列表就会展开。

Answer 4

尝试提供更多min-width

#main-navigation ul li {
float: left;
position: relative;
background: #D7351B;
min-width: 140px;

Answer 5

在css中，li元素具有：min-width: 105px;

将其更改为155px，它将解决此问题。

希望有所帮助。

Answer 6

非常简单，

您无法使用：top: 100%

您希望将此更新为top: 0，这会将其与其父级的顶部对齐。

在您的确切情况下，您可能需要top: 11px。

HTML下拉元素宽度未与兄弟姐妹对齐

6 个答案: