我能够让它在白色背景下工作:
![enter image description here](https://i.stack.imgur.com/jCRSg.png)
但在背景不是白色的情况下,该解决方案也不起作用:
![enter image description here](https://i.stack.imgur.com/poG7h.png)
我做了什么应该很明显为什么它不起作用(负边距+背景设置为背景颜色)。有什么解决方案可以使它始终看起来不错吗?
一种方法是使用间隔跨度和包装器(在本例中header
),所有元素都带有display
设置使它们显示为table-cell
s (example).
HTML
<header>
<span class="spacer"></span><!-- Place this wherever you want the border -->
<h1>Title</h1>
<!-- Spacing is automatically added next to elements (but not on ends) -->
<span class="spacer"></span>
<a href="http://www.example.com/">View Blog</a>
</header>
CSS
header {
display:table-row;
line-height:1.5em;
font-size:2em;
white-space:nowrap; /* Prevent titles from wrapping when more than one word is used */
}
header h1 {
font-size:inherit; /* Change font-size in header */
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
header span.spacer { /* Makes spacers stretch */
display:table-cell;
width:50%;
}
header span.spacer { /* Adds spacing on both sides of spacers */
padding:0 10px;
}
header span.spacer:first-child { /* Adds spacing only on right side of first spacer */
padding:0 10px 0 0;
}
header span.spacer:last-child { /* Adds spacing only on left side of last spacer */
padding:0 0 0 10px;
}
header span.spacer:after { /* Adds border to spacer */
display:inline-block;
width:100%;
content:".";
font-size:0;
color:transparent;
height:2px;
background:#000;
vertical-align:middle;
position:relative;
top:-1px;
}
header > a { /* Styles links according to example */
font-size:.4em;
vertical-align:middle;
background:#25a2a4;
color:#fff;
text-transform:uppercase;
font-family:monospace;
border-radius:.5em;
padding:.3em .5em;
text-decoration:none;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)