3

div クラスを自動サイズ変更する方法について簡単な質問があります。

エコーアウトしたいエラーメッセージがいくつかあります。このエラーメッセージのために、私はdivクラスを持っています:

.wrapper form .error {
    color: #ccc;
    position: absolute;
    z-index: 2;
    background-color:#fff;
    height: 26px;
    line-height: 26px;
    padding: 10px; 
    border: solid #ccc;
    border-width: 1px 1px 1px 1px;
    width: 200px; /*should be auto but doesnt work*/
    line-height: 26px;
    right: 100%;
    top: 7%;
}

文字列の長さが異なるさまざまなエラーメッセージが改行なしで 1 行に表示され、この div の幅が文字列の長さに応じて自動的にサイズ変更されるようにしたいと考えています。

4

4 に答える 4

6

http://jsfiddle.net/REsm3/

を使用white-space: nowrapすると、必要な 1 行の結果を得ることができます。ただし、「自動幅」スタイルを実現するには、要素をインラインまたはインライン ブロックにする必要があります。これを達成するためにマークアップを変更する方法については、私の jsfiddle を参照してください。要するに、エラーを共通の要素にラップし、それを .xml にclass="message"スタイル設定しtext-align: centerます。次に、をに設定しerrorてdisplay: inline、必要な「自動幅」スタイルを実現します。

<div class="message">
    <div class="error">
        This is an error message
    </div>
</div>

<div class="message">
    <div class="error">
        This is an error message. This is an error message. This is an error message.
    </div>
</div>

そしてCSS：

.message
{
    text-align: center;
    margin-bottom: 10px;
}

.message .error
{
    border: 1px solid red;
    padding: 2px;
    white-space: nowrap;

    display: inline;
    display: inline-block;
}
于 2013-03-11T12:17:50.357 に答える
0

white-space: nowrap;テキストを 1 行に保ちます。

withdisplay: inline;またはdisplay: inline-blockthedivは、テキストが収まるのに必要なだけ広く (そしてできるだけ狭く) なります。

JS ビンの例

于 2013-03-11T12:17:16.527 に答える
0

white-space: nowrap;すべてを 1 行にまとめるために使用します。

于 2013-03-11T12:15:00.597 に答える
0

CSS ルール:

white-space: nowrap;

行の折り返しを防ぎます。

エラー div の幅を 100% に設定すると、使用可能なスペースが自動的に埋められます。div を自動的にサイズ変更する必要がある理由を詳しく説明していただければ、さらにお役に立てるかもしれません。

于 2013-03-11T12:15:40.330 に答える