0

ページの下部にある独自の div にボタンの行がある JSP ページがあります。左端のボタンは、終了タグが button_bar div の開始と重なっているフォームに属しています。右端のボタンには、独自の自己完結型フォームがあります。

JSP を HTML ページ (完全、css ファイルなど) として保存すると、好きなようにボタンが水平に並んでいます。ただし、コンテンツが JSP にある場合、ボタンは水平方向に整列しません。

これを回避するために CSS でできることはありますか。

ボタン div:

<div class="button_bar">


        <div class="button_bar_left_button">     
            <input value="Request More Informtion" name="buttonRequestMoreInformation" type="submit">
        </div>

</form><!-- end form 'f', main form -->    

    <div class="button_bar_left_button">     
        <input value="Start New Search" onclick="location.href='search'" name="buttonSearch" type="button">
    </div>


        <div class="button_bar_right_button">
            <form action="initialRequest" method="post">
                <input name="NextRequest" value="Add Member" type="hidden">
                <input "buttonaddmember"="" value="Add Member" type="submit">
            </form>       
        </div>




</div><!-- end div button_bar -->

私のスタイルシートのCSS:

/* horizontal button bar */
.button_bar
{
    margin-left:auto;
    margin-right:auto;
    margin-top: 2%;
    margin-bottom: 2%;
    padding-bottom: 2%;
    width:100%;
    height:auto;
    vertical-align:top;
}

/* put a button on the far right of the above button bar */
.button_bar_right_button
{
    float:right;
    margin-left:1%;
    vertical-align:top;
}
/* put a button on the far left of the above button bar */
.button_bar_left_button
{
    float:left;
    margin-left:1%;
    vertical-align:top;
}

答え

以下のMOD steveaxのコメントは、この問題の解決に役立ちました。彼は、一部のブラウザーはタグを挿入して、私が行っていた間違いのバランスを取ると述べました。これにより、問題を解決する変更を行うことができました。彼の 2 番目のコメント (最初に提案された回答の下の最初のコメント) を回答として受け入れたいと思います。

ボタンの div の下にフォームの終了タグを移動しました。また、「メンバーの追加」フォームをそのすべての外に移動し、「メンバーの追加」ボタンを onclick でその特別なフォームの *.submit を呼び出す単純な古いボタンに変更しました。それで解決しました。「コメントを回答として受け入れる」リンク/ボタンが表示されませんが、あれば提供します。どうもありがとう。– スティーブは今編集

4

2 に答える 2

1

"buttonaddmember"=""無効なため、入力の一部を削除しました。現在、水平方向に整列しているようです。あなたがそれを意図したかどうかはわかりません。

<input "buttonaddmember"="" value="Add Member" type="submit">

http://jsfiddle.net/6MXuZ/

または、div に position:relative を追加してbutton_barから、ボタンを絶対に配置します。

于 2012-06-13T21:19:51.427 に答える
0

予測できないレンダリングにつながる HTML エラーがあります。

<form><!-- Opening form tag somewhere above -->
[...]
<div class="button_bar">
    <div class="button_bar_left_button">     
        <input value="Request More Informtion" name="buttonRequestMoreInformation" type="submit">
    </div>
</form><!-- end form 'f', main form -->  
[...]
</div><!-- end div button_bar -->

ブラウザーはこのエラーを修正して、終了タグbutton_barの前で divを閉じることにより、意味のある DOM を取得します。<form>

<form><!-- Opening form tag somewhere above -->
[...]
<div class="button_bar">
    <div class="button_bar_left_button">     
        <input value="Request More Informtion" name="buttonRequestMoreInformation" type="submit">
    </div>
</div><!-- Browser will likely insert a closing tag for .button_bar here to correct the error -->
</form><!-- end form 'f', main form -->  
[...]
<!-- This closing div tag will now be "extra" -->
</div><!-- end div button_bar -->
于 2012-06-25T02:41:31.250 に答える