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

【问题标题】：what's the easiest way to put space between 2 side-by-side buttons in asp.net在asp.net中的2个并排按钮之间放置空间的最简单方法是什么
【发布时间】：2011-07-04 10:22:14
【问题描述】：

我有 2 个并排的按钮，我想在它们之间放一些。

以下代码将有 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>

【问题讨论】：

您是否尝试过按钮本身的边距？
是的，我只是设计一个 span 类（例如 padding-right: 4px）并将它作为一个类应用到按钮上。也许我在这里遗漏了什么？？

标签： html css button space

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果您使用的是引导程序，请将 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>

【讨论】：

【解决方案3】：

如果您希望全局应用样式，您可以使用 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 会获得保证金。

【讨论】：

【解决方案4】：

旧帖子，但我想说最简洁的方法是在周围的 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>

【讨论】：

【解决方案5】：

还有另一种方法：

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

【讨论】：

【解决方案6】：

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

【讨论】：

有already an answer 建议这样做。

【解决方案7】：

按如下方式创建一个分隔符类：

.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 用于分隔表单中的项目等。

【讨论】：

这看起来是一个非常好的解决方案。谢谢！我不知道我可以通过这样一个简单的问题学到这么多。 :))
值得注意的是：如果你有任何类型的浮动，分隔线将折叠为零宽度。如果你设置了 min-height:1px 来处理它，（或者在内容中加入一个虽然我确信这不那么犹太）

【解决方案8】：

尝试将以下类放在您的 second 按钮上

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

编辑：

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

【讨论】：

【解决方案9】：

#btnClear{margin-left:100px;}

或者为按钮添加一个类并拥有：

.yourClass{margin-left:100px;}

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

【讨论】：

是的！比前两种解决方案更简单、更可靠。

【解决方案10】：

    <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"/>

【讨论】：

【解决方案11】：

在它们之间添加一个空格&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>

【讨论】：

就像亚历克斯托马斯在尼尔玛回答中所说的那样。使用 CSS。
通常建议不要使用 HTML 来实现这样的设计目标。

【解决方案12】：

你能来点&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>

【讨论】：

不要这样做，请使用 CSS。
对于屏幕阅读器来说，这是一个坏主意，因为将被视为一个字符。改用 CSS
是的，我确信使用 &nbsp 的这两个答案都会被否决。惊喜-惊喜..
我不知道屏幕阅读器，这很有趣，谢谢。