在aspx页面中显示css样式

Question

我有一个apsx页面，在那个页面中我有两个名为save和cancel的按钮，我需要用一些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;
}

我的风格为

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

将这两行添加到.bar：

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

Answer 4

您好现在可以定义表格右对齐和两个类创建在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>

​

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