6

幅を設定および定義することなく、インラインブロック要素 (この場合は<a>a 内) を次の行にクリアしようとしています。<p>display:block

例を次に示します: http://jsfiddle.net/alecrust/zstKf/

これが望ましい結果です（display:block幅を使用して定義します）：http://jsfiddle.net/alecrust/TmwhU/

4

7 に答える 7

3

テキストの実際の長さに応じて背景のスタイルを設定できるように、明示的な幅の設定を避けたい場合は、次の操作を実行できます。

リンクをラップします。

 <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/

于 2014-06-27T13:47:26.027 に答える
1

これは、p の最後の要素の後で改行したい場合にのみ機能します。

私はかなり実験しましたが、これはSafari 6でうまくいきます：

p.linebreak-after-last-element:after {
   content: "";
   display: inline-block;
   width: 100%;
}

他のブラウザでこれをテストしていませんが、非常にシンプルなので、.xml をサポートするすべてのブラウザで動作するはずdisplay: inline-blockです。

于 2013-01-17T06:42:22.093 に答える
1

少し面倒ですが、うまくいきます：

a {
    display: inline-block;
    padding: 5px 18px;
    background-color: #8C4AD5;
    text-decoration: none;
    position:relative;
    top:25px;
    left:-30%
}

左の位置をごまかす必要がありますが、基本的には、display:block例の幅の問題と同じように、既知の値を設定することに戻ります。本当に良いというわけではなく、別のアプローチです。

于 2012-06-13T13:52:58.237 に答える
1

inline-block 要素の後の空<div/>は、inline-block をクリアします。

于 2015-02-11T08:54:00.633 に答える
1

私が望むものに最も近いのは、 ( Fiddle:before )の前に新しい行を挿入することです。残念ながら、これは次の行までクリアしません。<a>

于 2012-06-13T14:42:59.713 に答える
0

clear:both疑似クラス :: を使用して、 ;でコンテンツを追加できます。それにプロパティ。

テストされていませんが、理論上は機能するはずです。

于 2015-01-26T16:45:33.033 に答える
0

あなたが持っている要件では、それは不可能だと思います。

これが役立つことを望んでいましたが、リンクの前に要素がないため、役に立ちません。

たとえば、HTML を変更するだけです: http://jsfiddle.net/thirtydot/zstKf/10/

于 2012-06-13T14:27:59.747 に答える