代码之家 › 专栏 › 技术社区 › charan kumar

边界与李的子代和子代重叠

twitter-bootstrap css html

charan kumar · 技术社区 · 6 年前

我正在尝试用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 回复 | 直到 6 年前

r3mainer 6 年前

如果这是你想要的,我会倾向于使用一个表而不是一个无序的列表。但是,您可以通过使用 outline 样式而不是边框。为了使这些轮廓线重叠,您需要在方框中添加额外的1倍的边距,并且需要进行更多的调整以使左侧的内容排列整齐,但它应该能够工作:

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

Arex 6 年前

应用 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>

按您希望的数额增加利润。希望这就是你需要的。

Devansh J 6 年前

这个问题已经被回答了,但如果有人想通过 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>