58

I have 2 buttons side by side, and I would like to have some inbetween them.

Following code will have 2 buttons right next to each other. I have tried margin for the div, and just couldn't get some nice space between the two. 

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

12 回答 12

83

创建一个分隔符类，如下所示：

.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 且宽度为 auto 的块 div 用于分隔表单中的项目等。

于 2011-02-25T16:35:07.880 回答
43

在它们之间添加一个空格&nbsp;（或更多取决于您的喜好） 

    <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>
于 2011-02-25T16:28:31.313 回答
31 
#btnClear{margin-left:100px;}

或者向按钮添加一个类并具有：

.yourClass{margin-left:100px;}

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

于 2011-02-25T16:31:04.790 回答
17 
    <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"/>
于 2011-02-25T16:30:13.533 回答
11

旧帖子，但我想说最干净的方法是向周围的 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>

于 2017-08-09T16:45:20.163 回答
10

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

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

编辑：

如果您希望您的第一个按钮与 div 以及第二个按钮间隔开，那么也将此类应用于您的第一个按钮。

于 2011-02-25T16:29:14.657 回答
5

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

于 2016-01-08T10:50:21.403 回答
5

如果您使用的是引导程序，请将 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>
于 2019-08-08T17:36:02.810 回答
3

你可以就一些&nbsp;吗？

<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>
于 2011-02-25T16:27:56.550 回答
3

还有另一种方法：

<span style="width: 10px"></span>

您可以使用 width 属性调整空间量。

您的代码将是：

<div style="text-align: center"> 
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
    <span style="width: 10px"></span>
    <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
</div>
于 2017-02-14T13:47:14.953 回答
1

如果您希望样式全局应用，您可以使用 css 中的相邻兄弟组合器。

.my-button-style + .my-button-style {
  margin-left: 40px;
}

/* general button style */
.my-button-style {
  height: 100px;
  width: 150px;
}

这是一个小提琴：https ://jsfiddle.net/caeLosby/10/

它类似于一些现有的答案，但它没有在第一个按钮上设置边距。例如在这种情况下

<button id="btn1" class="my-button-style"/>
<button id="btn2" class="my-button-style"/>

只会btn2得到保证金。

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

于 2019-02-28T15:47:17.173 回答
1

您可以使用btnSubmit::before { margin-left: 20px; }

于 2020-12-26T14:36:02.117 回答