html - 如何将边界底部进一步向下移动？

Question

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

在<li> ( .content-intro-full-right ul li ) - 它包含 <ul>操作系统。

例如:http://jsfiddle.net/t6gB7/12/

可以看到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 float 到右侧并添加一个带有 clear: both 的 div 以强制边框向下。我已经在这个 fiddle 中进行了演示，尽管我弄乱了操作系统列表周围的间距，并留下了一些彩色边框以显示元素的边界。

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