如何进一步向下移动边框底部？
如何进一步向下移动边框底部？
提问于 2012-11-11 07:06:31
如何在不指定<li>高度的情况下进一步向下移动边框底部border-bottom: 1px solid #E5E5E5; (.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;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2012-11-11 07:19:11
您可以将div向右浮动，并使用clear: both添加一个ul以强制边框向下移动。我已经在这个小提琴中演示过了，尽管我弄乱了OSes列表周围的间距，并且我留在了一些彩色边框中来显示元素的边界。
http://jsfiddle.net/t6gB7/19/
Stack Overflow用户
发布于 2012-11-11 07:17:35
您可以简单地使用padding(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;
}Stack Overflow用户
发布于 2012-11-11 07:45:52
opatut是对的，只要你使用"position: absolute;“你就不能做到这一点。下面是使用float和clear完成的另一个示例。btw upping opatuts答案
http://jsfiddle.net/t6gB7/21/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13326949
复制相关文章
相似问题
腾讯云开发者
