0

(これは CSS/HTML に関する質問です。)

右マージンまで拡張されていない 1 行の段落があり、その周囲に枠線を配置してテキスト ボックスに変換した場合、その枠線が右マージンまで拡張されないようにするにはどうすればよいですか?

<p style="border: 1px solid black;">
This is a test.
</p>

次のようになります。

+-----------------------------------------------------------------------------+
| This is a test.                                                             |
+-----------------------------------------------------------------------------+

次のようにしたい場合 (ハードコーディングのmargin-rightを推測する必要はありません):

+-----------------+
| This is a test. |
+-----------------+

もちろん、ここでは左から右の方向から話しています (つまり、ヘブライ語やアラビア語ではありません)。

どうもありがとうございました。

4

4 に答える 4

1

私がすることは、段落を浮かせてからクリアすることです:

p.neatBox {
    float: left;
    clear: both;
    padding: 5px;
    border: 1px solid blue;
}

例を参照してください: http://jsfiddle.net/audetwebdesign/8GbkJ/

inline-blockここでの利点は、が連続して続くことや、1 行に 2 つ以上表示されることを心配する必要がないことです。

注意すべき唯一のことは、余白が浮動要素で崩壊しないことです。そのため、段落間の間隔を制御するには、上部余白または下部余白のいずれかを設定する必要があります。

于 2013-09-17T21:45:52.900 に答える
1

これを試して

<p>
<span style="border: 1px solid black;">This is a test.</span>
</p>
于 2013-09-17T21:36:26.783 に答える
1

これを試すことができます (警告: IE7 では動作しません):

<p id='yourPara'>
    This is a test.
</p>

CSS

#yourPara {
    border: 1px solid black;
    display: inline-block;
}

displayの値を変更したくない場合はp、デフォルトの別の要素を使用するかinline、 のテキストをpインライン要素 (spanたとえば、 など) で囲み、その上に境界線を配置します。

JSFiddle

于 2013-09-17T21:35:57.403 に答える
1

display: inline-block;その要素で使用するだけです。+ 境界線を適用します。

于 2013-09-17T21:36:11.427 に答える