Question

如何进一步向下移动边框底部border-bottom: 1px solid #E5E5E5;而不指定<li>（.content-intro-full-right ul li）的高度

在<li>（.content-intro-full-right ul li）中 - 它包含<ul>个操作系统。

您可以看到border-bottom应出现在操作系统列表的下方。

<div class="content-intro-full-right">    
<ul>   
  <li>
     <ul class="operating-system">
        <li>Fedora</li>
        <li>ArchLinux</li>
        <li>FreePBX</li>
      </ul>
     <ul class="operating-system" style="margin-right: 140px;">
       <li>CentOS</li>
       <li>Ubuanto</li>
       <li>Debian</li>
       <li>Gentoo</li>
       <li>Slackware</li>
     </ul>
     <h4>Operating Systems</h4>
     <p>
      We offer a variety of Linux operating systems.
    </p>
  </li>
</ul>
</div>


.content-intro-full-right ul li {
    position: relative;
    padding: 30px 280px 20px 0;
    border-bottom: 1px solid #E5E5E5;
}

ul.operating-system  {
    position: absolute;
    top: 30px;
    right: 0;
}

ul.operating-system li, ul.operating-system li:nth-child(even) {
    border:none;
    padding: 7px;
    width: 80px;
    border-bottom: 1px solid #dedede;
    color:#808080;
    background-color: #f7f7f7;
    padding-left: 30px;
}

ul.operating-system li:last-child {
    border-bottom: none;
}

Answer 1

您可以将ul向右浮动并添加一个带有clear: both的div来强行删除边框。我已经在这个小提琴中进行了演示，虽然我弄乱了操作系统列表周围的间距，但我留下了一些彩色边框来显示元素的边界。

http://jsfiddle.net/t6gB7/19/

Answer 2

您可以简单地使用padding-bottom（padding:之后的第3个值）来进一步向下扩展框。但这有点像黑客。

.content-intro-full-right ul li {
    position: relative;
    padding: 30px 280px 160px 0;
    border-bottom: 1px solid #E5E5E5;
}

编辑：没有绝对位置http://jsfiddle.net/t6gB7/20/

<div class="container">
     <ul class="operating-system">
        <li>Fedora</li>
        <li>ArchLinux</li>
        <li>FreePBX</li>
     </ul>
     <ul class="operating-system">
       <li>CentOS</li>
       <li>Ubuanto</li>
       <li>Debian</li>
       <li>Gentoo</li>
       <li>Slackware</li>
     </ul>

     <h4>Operating Systems</h4>
     <p>
        We offer a variety of Linux operating systems.
     </p>
     <div class="clearfix"></div>
</div>


.container {
    padding: 30px 20px;
    border-bottom: 1px solid #E5E5E5;
}

.clearfix {
    clear: right;
}

ul.operating-system  {
    float: right;
    margin-left: 40px;
}

ul.operating-system li, ul.operating-system li:nth-child(even) {
    border:none;
    padding: 7px;
    width: 80px;
    border-bottom: 1px solid #dedede;
    color:#808080;
    background-color: #f7f7f7;
    padding-left: 30px;
}

ul.operating-system li:last-child {
    border-bottom: none;
}

Answer 3

opatut是对的，只要你使用“position: absolute;”你就无法做到这一点。这是另一个使用float和clear完成的示例... btw upping opatuts answer

http://jsfiddle.net/t6gB7/21/

如何进一步向下移动边界？

3 个答案:

编辑：没有绝对位置http://jsfiddle.net/t6gB7/20/