如何将文本放在边框上？ [英] How to position text over border?

问题描述

我能够以白色背景工作：

I was able to get it working with a white background:

但是在背景不是白色的情况下，解决方案不能正常工作：

But in cases where the background isn't white, the solution doesn't work as well:

>

应该很明显我做了什么为什么它不工作（负边距+背景设置为背景颜色）。是否有任何解决方案，使它总是看起来不错？

It should be quite obvious what I did any why it doesn't work (negative margin + background set to background color). Are there any solutions to make it always look good?

推荐答案

一种方法是使用间距跨度连同包装这个例子 header ），所有元素的显示设置，因此它们显示为 table-cell （示例）。

One way would be to use spacer spans along with a wrapper (in this case header), with all elements with display set so they appear as table-cells (example).

<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

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;
}

这篇关于如何将文本放在边框上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！