Html 在asp.net中的两个并排按钮之间放置空间的最简单方法是什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5119711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
what's the easiest way to put space between 2 side-by-side buttons in asp.net
提问by user570185
I have 2 buttons side by side, and I would like to have some inbetween them.
我有 2 个并排的按钮，我想在它们之间放置一些按钮。
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.
以下代码将有 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>
回答by Michael Allen
create a divider class as follows:
创建一个分隔符类，如下所示：
.divider{
width:5px;
height:auto;
display:inline-block;
}
Then attach this to a div between the two buttons
然后将其附加到两个按钮之间的 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>
This is the best way as it avoids the box model, which can be a pain on older browsers, and doesn't add any extra characters that would be picked up by a screen reader, so it is better for readability.
这是最好的方法，因为它避免了框模型，这在旧浏览器上可能会很麻烦，并且不会添加任何屏幕阅读器会拾取的额外字符，因此可读性更好。
It's good to have a number of these types of divs for certain scenarios (my most used one is vert5spacer, similar to this but puts a block div with height 5 and width auto for spacing out items in a form etc.
对于某些场景，最好有许多这些类型的 div（我最常用的一个是 vert5spacer，与此类似，但放置了一个高度为 5 和宽度为 auto 的块 div，用于分隔表单中的项目等。
回答by QuinnG
Add a space between them (or more depending on your preference)
在它们之间添加一个空格（或更多，取决于您的喜好）
<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>
回答by Alex
#btnClear{margin-left:100px;}
Or add a class to the buttons and have:
或者向按钮添加一个类并具有：
.yourClass{margin-left:100px;}
This achieves this - http://jsfiddle.net/QU93w/
这实现了这一点 - http://jsfiddle.net/QU93w/
回答by WraithNath
<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"/>
回答by Mahesh Velaga
Try putting the following class on your secondbutton
尝试将以下课程放在您的第二个按钮上
.div-button
{
margin-left: 20px;
}
Edit:
编辑：
If you want your first button to be spaced from the div as well as from the second button, then apply this class to your first button also.
如果你希望你的第一个按钮，从股利以及来自第二个按钮间隔开，那么这个类适用于您的第一个按钮也。
回答by prograhammer
Old post, but I'd say the cleanest approach would be to add a class to the surrounding div and a button class on each button so your CSS rule becomes useful for more use cases:
旧帖子，但我想说最干净的方法是向周围的 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>回答by azibit
I used and it is working fine. You could try it.
You do not need to use the quotation marks
我用过 ，效果很好。你可以试试。您不需要使用引号
回答by Manish Jain
If you are using bootstrap, add ml-3 to your second button:
如果您使用的是引导程序，请将 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>
回答by Saket Mehta
There is another way of doing so:
还有另一种方法：
<span style="width: 10px"></span>
<span style="width: 10px"></span>
You can adjust the amount of space using the width property.
您可以使用 width 属性调整空间量。
Your code would be:
您的代码将是：
<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>
回答by ihamlin
Can you just just some ?
你能就一些 吗？
<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>
