.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