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

概述很难解释,所以我创建了一个 codepen给你看看.将鼠标悬停在导航项上并显示下拉菜单时.您会看到某些项目没有正确排列.即一些物品的宽度大于它们的兄弟物品.我只是希望它们都伸展到最宽的列表项的宽度. (困惑了吗？)看看代码笔吧.. 你应该使用display：inline-block而不是float：left in / * list item * / css,并且应该添加display：table- 很难解释,所以我创建了一个 codepen给你看看.将鼠标悬停在导航项上并显示下拉菜单时.您会看到某些项目没有正确排列.即一些物品的宽度大于它们的兄弟物品.我只是希望它们都伸展到最宽的列表项的宽度. (困惑了吗？)看看代码笔吧..解决方法 你应该使用display：inline-block而不是float：left in / * List item * / CSS,并且应该添加display：table-row;进入/ *子列表项目* /.

@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,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;     }  }}

总结

以上是内存溢出为你收集整理的HTML下拉元素宽度未与兄弟姐妹对齐全部内容，希望文章能够帮你解决HTML下拉元素宽度未与兄弟姐妹对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。