FineUI 官方论坛

标题: 【已解决】让两个按钮水平居中的方法,并且两个按钮中间留 [打印本页]

---

作者: 夜冰    时间: 2013-5-16 17:36
标题: 【已解决】让两个按钮水平居中的方法,并且两个按钮中间留
<xanel ID="anel1" runat="server" Width="900px" BodyPadding="15px" ShowBorder="false" ShowHeader="false" Title="anel" Layout="HBox" BoxConfigAlign="Center" BoxConfigPosition="Center">
            <Items>
                <x:Button ID="Button2" runat="server" Text="录入信息"></x:Button>
                <x:Button ID="Button3" runat="server" Text="清空重写" CssStyle=" margin-left:6px;"></x:Button>
            </Items>
        </xanel>
自已看吧,有时感觉用起来有点坑爹啊,发现熟悉的东西不会用了,两个按钮放在一起还换行,感觉用完这个就不会用CSS之类的了

---

作者: apoul    时间: 2013-5-16 20:49
用form排版比较好

---

作者: sanshi    时间: 2013-5-16 21:53
可以看这个示例：http://fineui.com/demo/#/demo/button/button.aspx

按钮一行显示需要使用简单的CSS（float:left），因为按钮是渲染为一个DIV的（display:block）

---

作者: 夜冰    时间: 2013-5-17 08:52
那个例子我看过,你可以试试在一行多个按钮水平居中是什么样子

---

作者: sanshi    时间: 2013-5-17 10:52
新增了一个示例，你可以下载最新源代码，自己编译。

-增加示例form/form_center_button.aspx，使两个按钮水平居中显示（夜冰）。

[attach]2326[/attach]

1. 
   
2. <x:Panel ID="Panel1" runat="server" EnableBackgroundColor="true"
   
3. ShowBorder="false"
   
4. BodyStyle="text-align:center;padding-top:10px;margin-top:10px;border-top:solid
   
5. 1px
   
6. #ccc;"
   
7. ShowHeader="false">
   
8. <Items>
   
9.   <x:Button
   
10. runat="server" Text="验证此表单并提交"
    
11. CssStyle="display:inline-block;margin-right:10px;"
    
12.    ValidateForms="Form1"
    
13. ID="btnSubmitForm1"
    
14. OnClick="btnSubmitForm1_Click">
    
15.   </x:Button>
    
16.   <x:Button
    
17. ID="btnResetForm1" EnablePostBack="false"
    
18. CssStyle="display:inline-block;"
    
19.    Text="重置表单"
    
20. runat="server">
    
21.   </x:Button>
    
22. </Items>
    
23. </x:Panel>

复制代码

---

作者: Stone.yu    时间: 2013-5-24 10:14

sanshi 发表于 2013-5-17 10:52
新增了一个示例，你可以下载最新源代码，自己编译。

-增加示例form/form_center_button.aspx，使两个按钮 ...

这个实例中的办法在IE7中是不行的，按钮还是换行

---

作者: sanshi    时间: 2013-5-24 11:18
已更新。 -更新示例form/form_center_button.aspx，支持IE7（Stone.yu ）。

IE7 不支持 block 元素设为 inline-block， 需要特殊处理：

1. .mypanel
   
2.         {
   
3.             text-align: center;
   
4.             padding-top: 10px;
   
5.             margin-top: 10px;
   
6.             border-top: solid 1px #ccc;
   
7.         }
   
8.         .mypanel .mybutton
   
9.         {
   
10.             display: inline-block;
    
11.             *display: inline;
    
12.             margin-right: 10px;
    
13.         }

复制代码

---

欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/)

Powered by Discuz! X3.4