1

我有一个 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>

我的CSS脚本是

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

我得到了这样的风格

在此处输入图像描述

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

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

注意：我把位置：绝对，它会干扰其他表单的对齐方式，因为我在所有表单中都使用相同的条形样式......在其他表单中，我有填充页面并自动保存的控件取消按钮出现在底部，但这里我只有 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

你的问题不清楚，我得到你想要移动页面底部的按钮：

<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

将这两行添加到您的 .bar 中：

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

嗨，现在您可以定义表格右对齐并在 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/

于 2012-04-16T07:21:46.587 回答