幅を設定および定義することなく、インラインブロック要素 (この場合は<a>
a 内) を次の行にクリアしようとしています。<p>
display:block
例を次に示します: http://jsfiddle.net/alecrust/zstKf/
これが望ましい結果です(display:block
幅を使用して定義します):http://jsfiddle.net/alecrust/TmwhU/
幅を設定および定義することなく、インラインブロック要素 (この場合は<a>
a 内) を次の行にクリアしようとしています。<p>
display:block
例を次に示します: http://jsfiddle.net/alecrust/zstKf/
これが望ましい結果です(display:block
幅を使用して定義します):http://jsfiddle.net/alecrust/TmwhU/
テキストの実際の長さに応じて背景のスタイルを設定できるように、明示的な幅の設定を避けたい場合は、次の操作を実行できます。
リンクをラップします。
<p>To stay up to date <span><a href="#">Follow Us</a></span></p>
<span>
リンクの周りにタグを追加したことに注意してください。
CSS でラッパーのスタイルを設定します。
span {
display: inline-block;
width: 100%;
}
幅を 100% に設定すると、ラッパーが行全体を占めるようになります。リンクの<a>
タグをインライン ブロックに設定しておくと、コンテナの幅 100% に合わせて拡張することなく、パディングと背景を適用できます。
分岐した JSFiddle: http://jsfiddle.net/Cm9kZ/
これは、p の最後の要素の後で改行したい場合にのみ機能します。
私はかなり実験しましたが、これはSafari 6でうまくいきます:
p.linebreak-after-last-element:after {
content: "";
display: inline-block;
width: 100%;
}
他のブラウザでこれをテストしていませんが、非常にシンプルなので、.xml をサポートするすべてのブラウザで動作するはずdisplay: inline-block
です。
少し面倒ですが、うまくいきます:
a {
display: inline-block;
padding: 5px 18px;
background-color: #8C4AD5;
text-decoration: none;
position:relative;
top:25px;
left:-30%
}
左の位置をごまかす必要がありますが、基本的には、display:block
例の幅の問題と同じように、既知の値を設定することに戻ります。本当に良いというわけではなく、別のアプローチです。
inline-block 要素の後の空<div/>
は、inline-block をクリアします。
私が望むものに最も近いのは、 ( Fiddle:before
)の前に新しい行を挿入することです。残念ながら、これは次の行までクリアしません。<a>
clear:both
疑似クラス :: を使用して、 ;でコンテンツを追加できます。それにプロパティ。
テストされていませんが、理論上は機能するはずです。
あなたが持っている要件では、それは不可能だと思います。
これが役立つことを望んでいましたが、リンクの前に要素がないため、役に立ちません。
たとえば、HTML を変更するだけです: http://jsfiddle.net/thirtydot/zstKf/10/