我需要在边框和背景颜色之间创建空白区域。
示例
好的,| = border,#= background color
以上示例将被绘制为| ##### |我需要| ##### |
我将如何做到这一点?
我在图片中的示例代码是(下面)
CSS
.nav-justified > .active > a, .nav-justified > .active > a:hover, .nav-justified > active > a:focus {
background-color: #F0F0F0;
background-image: none;
color: #8f1b1f;
left: 0;
width: 100%;
margin-top: -17px;
padding-bottom: 20px;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
}
.nav-justified > li > a {
border-left: 1px solid #d5d5d5;
line-height: 2px;
}
HTML
<ul class="nav nav-justified" id="tableButtons">
<li class='active'><a href="#">Text here</a></li>
</ul>
答案 0 :(得分:2)
设置列表元素的边框,背景颜色&amp;填充锚标记(不是列表元素),然后将边距应用于锚标记。
例如:
ul {
list-style:none;
}
li {
width:250px;
text-align:center;
border-left:1px solid #d5d5d5;
border-right:1px solid #d5d5d5;
}
li a {
color: #8f1b1f;
background-color: #F0F0F0;
text-decoration:none;
padding:10px;
display:block;
margin:0 2px;
}
答案 1 :(得分:0)
更新:Your scenario JSFIddle example。
您可以使用边距来显示白色背景。 JSFiddle example here
HTML:
<div class="outer"><div class="inner">Name And Address Details</div></div>
CSS
.outer {
display: inline-block;
border-left: 1px solid #d5d5d5;
}
.outer .inner {
padding: 5px 10px;
background: #ddd;
margin-left: 1px;
}
在您的示例中, li 将为外部, 为内部。
答案 2 :(得分:0)
如果您对该元素有背景,那么添加填充将毫无用处。
因此,在这种情况下,您可以使用background-clip: content-box;或outline-offset
说明: 如果使用包装器,则将背景与边框分开很简单。但是,如果您要为具有背景的同一元素设置样式,则无论您要添加多少填充,背景和边框之间都不会有空格,除非您使用 background-clip 或轮廓偏移