1

この div があります (必要に応じて、スパンまたはその他のクリックできない要素にすることができます)。メッセージアラートボックスです。 

<div id="messageModal" class="medium reveal-modal">
    <div class="row">
        <div id="messageAlertBox" class="alert-box"></div>
        <div class="small-6 large-6 columns"><p id="messageText" class="lead"></p></div>
    </div>
    <a class="close-reveal-modal">x</a>
</div>

次に、次のことを行います。

function notifyUser(alertType, messageText) {
    if (alertType === 'Success') {
        $('#messageAlertBox').addClass('success');
    } else if (alertType === 'Error') {
        $('#messageAlertBox').addClass('alert');
    }

    $('#messageAlertBox').html(alertType);
    $('#messageText').html(messageText);
    openModal = 'messageModal';
}

"alertType" は、長さが不明な文字列である可能性があります。

何が起こっているかというと、messageAlertBox は含まれている要素と同じ幅です。私はこれを何度もいじりましたが、最大幅でない場合は、狭くなりすぎました。基本的には[]のみです。

この要素は、文字列の alertType (プラス少し) と同じ幅にする必要があります。span は自動的にそれを行うと思っていましたが、間違っていたと思います。

これどうやってするの？

4

3 に答える 3

0

特に指定しない限り、Div は自動的にページの幅全体を占めます。

css の div (またはクラス)

これを追加してみてください：（divまたはあなたのIDを使用できます）

div
{
   display:inline-block;
}

デフォルトの表示値は block で、要素を横に配置することはできません。

inline-block は、幅を「使用する必要があるもの」に設定し、div がページの幅全体を占めるのを防ぎます。

それが単なるテキストの場合、display:inline も機能するはずです。

于 2013-05-12T00:41:13.330 に答える
0

私の理解が正しければ、 #messageAlertBox をスパンに少しのパディングを加えた幅にする必要がありますか? display: block (または必要に応じて inline-block ) に設定するだけでそれを行うことができます。

div {
    display: inline;
    padding: 5px;
}

http://jsfiddle.net/vaAJB/2/

于 2013-05-12T00:45:55.477 に答える
0

理解した。 

<div class="small-1 large-1 columns"><span id="messageAlertBox" class="alert-box" style="display: inline;"></span></div>

小さな 1 列の div は、コンテンツを行の正しい場所に配置します。コンテンツは、インライン スタイルでテキストのサイズにまたがります。

このソリューションは、テキスト サイズの制約に違反することなく、ブラウザー ウィンドウのサイズに反応します。

于 2013-05-12T01:26:50.230 に答える