什么是在asp.net中的两个并排按钮之间放置空间的最简单方法

Question

我有两个并排的按钮,我想在它们之间有一些.

以下代码将有2个按钮紧挨着.我已经尝试了div的余量,并且在两者之间无法获得一些不错的空间.

<div style="text-align: center"> 
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
    <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
</div>

Answer 1

创建一个divider类如下:

.divider{
    width:5px;
    height:auto;
    display:inline-block;
}

然后将其附加到两个按钮之间的div

<div style="text-align: center"> 
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
    <div class="divider"/>
    <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
</div>

这是最好的方法,因为它避免了盒子模型,这可能是旧浏览器的痛苦,并且不会添加任何由屏幕阅读器拾取的额外字符,因此它更易于阅读.

在某些场景中有很多这些类型的div是很好的(我最常用的是vert5spacer,类似于此但是放置一个高度为5的块div和用于在表单中间隔出项目的宽度auto等.

Answer 2

 在它们之间添加空格(或更多,取决于您的偏好)

    <div style="text-align: center">         
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
        &nbsp;
        <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
    </div>

Answer 3

#btnClear{margin-left:100px;}

或者在按钮中添加一个类,并具有:

.yourClass{margin-left:100px;}

这实现了这个 - http://jsfiddle.net/QU93w/

Answer 4

    <style>
    .Button
    {
        margin:5px;
    }
    </style>

 <asp:Button ID="Button1" runat="server" Text="Button" CssClass="Button" />
 <asp:Button ID="Button2" runat="server" Text="Button" CssClass="Button"/>

Answer 5

尝试将以下课程放在第二个按钮上

.div-button
{
    margin-left: 20px;
}

编辑:

如果你希望你的第一个按钮,从股利以及来自第二个按钮间隔开,那么这个类适用于您的第一个按钮也.

Answer 6

旧帖子,但我要说最干净的方法是在周围的div上添加一个类,并在每个按钮上添加一个按钮类,这样你的CSS规则就可以用于更多用例:

/* Added to highlight spacing */
.is-grouped {   
    display: inline-block;
    background-color: yellow;
}

.is-grouped > .button:not(:last-child) {
    margin-right: 10px;
}

Spacing shown in yellow<br><br>

<div class='is-grouped'>
    <button class='button'>Save</button>
    <button class='button'>Save As...</button>
    <button class='button'>Delete</button>
</div>

Answer 7

我用过 ，它工作正常。你可以试试看。您不需要使用引号

Answer 8

如果您使用的是引导程序，请将 ml-3 添加到您的第二个按钮：

 <div class="row justify-content-center mt-5">
        <button class="btn btn-secondary" type="button">Button1</button>
        <button class="btn btn-secondary ml-3" type="button">Button2</button>
 </div>

Answer 9

你能只来一些 吗？

<div style="text-align: center"> 
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
    &nbsp;&nbsp;
    <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
</div>