边界重叠了li的子代和子代

Question

我正在尝试使用ul li开发带边框的框，

我已经应用了边框，但是问题是当我为li应用边框底部和边框顶部时，第一个1px边框底部与第二个li border-top重叠，并且看起来像2px边框。

我的代码如下

 .main-permissions-box{ border-right: 1px solid #555; border-bottom: 1px solid #555; border-left: 1px solid #555; width: 380px; margin: 0 auto; margin-bottom: 20px; } .main-permissions-box li{ list-style-type: none; padding:8px; border-top:1px solid #555; border-bottom:1px solid #555; } .main-permissions-box > ul> li{ border-bottom:1px solid #555; } .main-permissions-box > li:first-child{ border-top: 1px solid #555; } .main-permissions-box ul ul li{ border-left:1px solid #555; } .main-permissions-box > ul{ padding: 0;margin: 0; } .permission-text{ padding-left: 25px; } 

 <div class="modal fade assign-menu-popup" role="dialog" id="assign_menu_modal"> <div class="modal-dialog" role="document"> <div class="modal-content clearfix"> <div class="main-permissions-box"> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Pre Sales</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClas"> <span class="permission-text">Schedule Consultation</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option One</span> </li> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option Two</span> </li> </ul> </ul> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Schedule Consultation</span> </li> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Customer</span> </li> </ul> </div> <div class="clearfix"></div> </div> </div> </div> 

有什么方法可以应用边框，以免边框重叠吗？

Answer 1

将margin-bottom应用于列表元素。 这是代码：

  .main-permissions-box{ border-right: 1px solid #555; border-bottom: 1px solid #555; border-left: 1px solid #555; width: 380px; margin: 0 auto; margin-bottom: 20px; } .main-permissions-box li{ list-style-type: none; padding:8px; border-top:1px solid #555; border-bottom:1px solid #555; } .main-permissions-box > ul> li{ border-bottom:1px solid #555; margin-bottom:-1px; } .main-permissions-box > li:first-child{ border-top: 1px solid #555; } .main-permissions-box ul ul li{ border-left:1px solid #555; margin-bottom:-1px; } .main-permissions-box > ul{ padding: 0;margin: 0; } .permission-text{ padding-left: 25px; } 

 <div class="modal fade assign-menu-popup" role="dialog" id="assign_menu_modal"> <div class="modal-dialog" role="document"> <div class="modal-content clearfix"> <div class="main-permissions-box"> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Pre Sales</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClas"> <span class="permission-text">Schedule Consultation</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option One</span> </li> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option Two</span> </li> </ul> </ul> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Schedule Consultation</span> </li> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Customer</span> </li> </ul> </div> <div class="clearfix"></div> </div> </div> </div> 

将保证金增加所需的数量。 希望这是您所需要的。

Answer 2

如果这是您想要的，我倾向于使用表格而不是无序列表。 但是，您可以通过使用outline样式而不是边框​​来获得所需的效果。 您需要在框上添加一个额外的1px边距，以使这些轮廓重叠，并且还需要进行一些调整以使内容在左侧对齐，但这应该可以：

 .main-permissions-box{ border-left: 1px solid #555; width: 380px; margin: 0 auto; margin-bottom: 20px; } .main-permissions-box li{ list-style-type: none; padding:8px; margin: 1px; outline: 1px solid #555; } .main-permissions-box > ul> li{ margin-left: 0; } .main-permissions-box > li:first-child{ } .main-permissions-box ul ul li{ } .main-permissions-box > ul{ padding: 0;margin: 0; } .permission-text{ padding-left: 25px; } 

 <div class="modal fade assign-menu-popup" role="dialog" id="assign_menu_modal"> <div class="modal-dialog" role="document"> <div class="modal-content clearfix"> <div class="main-permissions-box"> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Pre Sales</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClas"> <span class="permission-text">Schedule Consultation</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option One</span> </li> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option Two</span> </li> </ul> </ul> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Schedule Consultation</span> </li> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Customer</span> </li> </ul> </div> <div class="clearfix"></div> </div> </div> </div> 

Answer 3

该问题已得到回答，但在回答是否有人希望通过border而不是outline或negative margins解决问题时回答

下面的代码摘录可帮助进行任何形式的嵌套，而不仅是此问题中的嵌套

ul > li{ border-bottom: 1px solid #555; }
ul > li:last-child{ border-bottom: none; }
ul > li:first-child{ border-top: 1px solid #555; }
ul ul > li:first-child{ border-top: none; }

前三个规则确保单个ul正确边界，最后三个规则负责嵌套

 .main-permissions-box { border-right: 1px solid #555; border-bottom: 1px solid #555; border-left: 1px solid #555; width: 380px; margin: 0 auto; margin-bottom: 20px; } .main-permissions-box li { list-style-type: none; padding: 8px; } .main-permissions-box ul ul li { border-left: 1px solid #555; } .main-permissions-box>ul { padding: 0; margin: 0; } .permission-text { padding-left: 25px; } .main-permissions-box ul>li { border-bottom: 1px solid #555; } .main-permissions-box ul>li:last-child { border-bottom: none; } .main-permissions-box ul>li:first-child { border-top: 1px solid #555; } .main-permissions-box ul ul>li:first-child { border-top: none; } 

 <div class="modal fade assign-menu-popup" role="dialog" id="assign_menu_modal"> <div class="modal-dialog" role="document"> <div class="modal-content clearfix"> <div class="main-permissions-box"> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Pre Sales</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClas"> <span class="permission-text">Schedule Consultation</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option One</span> </li> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option Two</span> </li> </ul> </ul> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Schedule Consultation</span> </li> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Customer</span> </li> </ul> </div> <div class="clearfix"></div> </div> </div> </div>