1

私はapsxページを持っており、そのページには保存とキャンセルと呼ばれる2つのボタンがあります。これをいくつかのcssスタイルで表示する必要があります。私のスクリプトは

<table>
<tr>
    <td align="right" class="bar">
        <table>
            <tr>
                <td>
                    <asp:Button ID="btnSave" runat="server" Text="Save"/>
                </td>
                <td>
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                </td>
            </tr>
        </table>
    </td>
</tr>

そして私のcssスクリプトは

.bar
{
background-position: center;
border-width: 1px;
border-color: #CCCCCC;
vertical-align: middle;
height: 30px;
border-top-style: solid;
}

とスタイルを取得しています

ここに画像の説明を入力してください

これらの保存およびキャンセルボタンの上にさらにいくつかのコントロールがあります...問題は、バースタイルのこの保存およびキャンセルボタンがそれらの上のコントロールの直後に来ることです...。

これらのボタンがページの中央に表示されているので、ページの下部にバースタイルでこれらの保存ボタンとキャンセルボタンを表示する必要があります。これを行うにはどうすればよいですか。

注：私は位置を置きます：絶対、それは他のフォームの配置を乱します、cozはすべてのフォームでこれと同じバースタイルを使用しています......他のフォームでは、ページを埋めて自動的に保存するコントロールがありますキャンセルボタンは下部にありますが、ここには4つのコントロールしかありません...したがって、保存とキャンセルボタンが中央にあり、それが下部に表示しようとしています。

4

4 に答える 4

3

JSFiddleのソリューションは次のとおりです。

http://jsfiddle.net/SX7n3/6/

一つには、テーブルを失います...

<div id="content">
    Hello World!
</div>

<div class="clear">&#160;</div>

<div class="bar">
    <div class="buttons">    
          <button type="button" id="submit">Submit</button>
          <button type="button" id="cancel">Cancel</button>
    </div>    
</div>    

.content
{
    min-height:800px;
    width: 100%;
}

.bar
{
    padding-top: 4px;
    border-width: 1px;
    border-color: #000;
    background-color: #ccc;
    height: 30px;
    border-style: solid;
}

.buttons
{
    float: right;        
}

.clear
{
    clear: both;
}
于 2012-04-16T07:26:59.767 に答える
1

こんにちは今、あなたはこのCssのようにcssでテーブルアラインを正しく定義し、2つのクラスを作成することができます 

.bar
{
background-position: center;
border-width: 1px;
border-color: #CCCCCC;
vertical-align: middle;
height: 30px;
border-top-style: solid;
}

.save{width:100px;
height:20px;
background:green;
display: inline-block;}

.cancel{width:100px;
height:20px;
background:red;
display: inline-block;}

HTML 

<table align="right">
<tr>
    <td align="right" class="bar">
        <table>
            <tr>
                <td>
                    <asp:Button ID="btnSave" runat="server" Text="Save" class="save"/>
                </td>
                <td>
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel"  class="cancel"/>
                </td>
            </tr>
        </table>
    </td>
    </tr>
</table>

​

ライブデモhttp://jsfiddle.net/rohitazad/a9uym/

于 2012-04-16T07:21:46.587 に答える
1

あなたの質問は明確ではありません、私があなたにあなたがページの下部にあるボタンを動かしたいと思ったのは何ですか？

<div class="bottomBar">
<table>
<tr>
    <td align="right" class="bar">
        <table>
            <tr>
                <td>
                    <asp:Button ID="btnSave" runat="server" Text="Save"/>
                </td>
                <td>
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                </td>
            </tr>
        </table>
    </td>
</tr>
</div>

およびcss

.bottomBar
{
float :bottom;
}

.bar
{
background-position: center;
border-width: 1px;
border-color: #CCCCCC;
vertical-align: middle;
height: 30px;
border-top-style: solid;
}
于 2012-04-16T07:18:33.547 に答える
1

これらの2行を.barに追加します。

.bar
{
position:absolute;
bottom:0;
/* the rest of your code */
}
于 2012-04-16T07:20:44.317 に答える