邊界重疊了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>