.css 使未排序列表的宽度等于其父列表的宽度 div

Question

嗨，我有一个响应式下拉菜单：

<div class="main-nav">

<ul id="menu-horizontalnav" class="menu">
   <li <a> </a> </li>
   <li <a> </a> </li>
   <li <a> </a> </li>

</ul>

</div>

main-nav 的尺寸小于 ul 的尺寸。见上图红框。 ul 的 .css 参数是

.js .main-nav .menu {

position: absolute;
z-index: 1000;
top: 30px;
width: 100%;
}

如果有人可以帮助我使 2 个元素的宽度对齐，我将非常高兴。

Answer 1

看起来 width 不包括 border

为给出 border 的元素添加 box-sizing:border-box 它将修复它，这将从内部给出 padding, border 而不会扩展 width

.css make the width of an unsorted list to the widht of its parent div