在aspx页面中显示css样式

I have a apsx page and in that page I have two buttons called save and cancel, i need to display this with some css style, my script is

我有一个apsx页面,在那个页面我有两个叫做保存和取消的按钮,我需要用一些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>   

and my css script is

我的css脚本是

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

and am getting the style as

我的风格是

I have few more controls above these save and cancel buttons...the problems is this save and cancel buttons with the bar style comes right after the controls above them....

我在这些保存和取消按钮之上还有更多的控件...问题是这个保存和取消按钮带有条形样式就在他们上面的控件之后......

now these buttons are displaying at the center of the page and I need to display these save and cancel buttons with the bar style at the bottom of the page....how can I do this..

现在这些按钮显示在页面的*,我需要在页面底部显示这些保存和取消按钮以及条形样式....我该怎么做...

note:I put the position:absolute, it will disturb the alignments in other forms, coz am using this same bar style in all my forms......in other forms I have the controls that fills the page and automatically the save cancel buttons are coming at the bottom, but here I have only 4 controls...so the save and cancel button is at center, thats what am trying to display at the buttom

注意:我把位置:绝对,它会打扰其他形式的对齐,因为我在所有形式中使用相同的条形样式......在其他形式中我有控件填充页面并自动保存取消按钮位于底部,但在这里我只有4个控件...所以保存和取消按钮位于中心位置,这就是我想要在屏幕上显示的内容

4 个解决方案

#1

Here's the solution in JSFiddle:

这是JSFiddle中的解决方案:

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

For one, lose the table...

一个人,丢掉桌子......

<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;
}

#2

Your question is not clear, what I got you want to move buttons at bottom of page:

您的问题不明确,我想让您在页面底部移动按钮:

<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>

and css

.bottomBar
{
float :bottom;
}

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

#3

Add those two lines to your .bar:

将这两行添加到.bar:

.bar
{
position:absolute;
bottom:0;
/* the rest of your code */
}

#4

Hi now you can define table align right and two class create in css as like this Css

嗨,现在你可以定义表格右对齐和两个类在css中创建就像这个Css

.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>

​

Live demo http://jsfiddle.net/rohitazad/a9uym/

现场演示http://jsfiddle.net/rohitazad/a9uym/