边界重叠了li

时间：2018-06-27 10:22:56

标签： html css twitter-bootstrap

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

我已经应用了边框，但是问题是当我为li应用边框底部和顶部边框时，第一个1px边框底部与第二个li边框顶部重叠，并且看起来像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>

有什么方法可以应用边框，使其不会像重叠一样出现？

3 个答案:

答案 0 :(得分：2)

将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>

按所需量增加边距。希望这就是您所需要的。

答案 1 :(得分：1)

如果这是您想要的，我倾向于使用表格而不是无序列表。但是，您可以使用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>

答案 2 :(得分：1)

问题已经回答，但是回答是否有人想通过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>

相关问题
最新问题