1

如何在不指定( ) 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;
}
4

3 回答 3

2

您可以将 s 浮动ul到右侧并添加一个 divclear: both以强制边框向下。我已经在这个小提琴中进行了演示，尽管我弄乱了操作系统列表周围的间距，并且我留下了一些彩色边框以显示元素的边界。

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

于 2012-11-10T23:19:10.627 回答
0

您可以简单地使用 padding-bottom（之后的第三个值padding:）将框进一步向下扩展。但这有点骇人听闻。

.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;
}
于 2012-11-10T23:17:34.500 回答
0

opatut 是对的，只要你使用“ position: absolute;”你就无法做到这一点。这是另一个用 float 和 clear 完成的示例......顺便说一句，增加 opatuts 答案

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

于 2012-11-10T23:45:52.160 回答