html - テキストを境界線上に配置するにはどうすればよいですか？

Question

私はそれを白い背景で動作させることができました：

しかし、背景が白でない場合、解決策はうまく機能しません：

なぜそれが機能しないのか（負のマージン+背景を背景色に設定）、私が何をしたかは非常に明白です。常に見栄えを良くするための解決策はありますか？

Answer 1

1つの方法は、ラッパー（この場合header）とともにスペーサースパンを使用し、すべての要素がsdisplayとして表示されるように設定することですtable-cell（例）。

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

Answer 2

背景が白に設定されているdivにテキストとボタンを配置していますか？CSSを表示せずに何をしているのかを判断するのは困難です。

背景のあるdivを使用している場合は、それを削除してみませんか？または、何らかの制約がある場合は、背景をrgba（＃、＃、＃、0.0）に設定してみませんか？

background:rgba(255,255,255,0.0);

alphaプロパティは、不透明度のレベルを設定するのに役立ちます。

Answer 3

<fieldset>これを実現するためにタグを使用できます。

例：https ：//jsbin.com/tovuwimezu/edit？html、css、output

HTML

<form>
    <fieldset>
        <legend class="blogLegend">New Blog Post</legend>

        blog details here
    </fieldset>
</form>

CSS

.blogLegend {
    font-weight: 600;
    color: rgb(63, 169, 196);
    padding: 10px;
    text-align: center;
}