Html 想要在按钮之间添加间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31198170/
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
Want to add spacing between buttons
提问by Semi Developer
Yo all.I am Admin's relative. I have a simple task to add space between buttons in a dialog box like in the example code below obtained from http://bootboxjs.com/examples.html. Just imagine that there is more than 1 button is this example. Like save, delete, cancel, confirm.
哟大家，我是管理员的亲戚。我有一个简单的任务来在对话框中的按钮之间添加空格，就像下面从http://bootboxjs.com/examples.html获得的示例代码一样。试想一下，这个例子有不止 1 个按钮。如保存、删除、取消、确认。
bootbox.dialog({
title: "This is a form in a modal.",
message: '<div class="row"> ' +
'<div class="col-md-12"> ' +
'<form class="form-horizontal"> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="name">Name</label> ' +
'<div class="col-md-4"> ' +
'<input id="name" name="name" type="text" placeholder="Your name" class="form-control input-md"> ' +
'<span class="help-block">Here goes your name</span> </div> ' +
'</div> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="awesomeness">How awesome is this?</label> ' +
'<div class="col-md-4"> <div class="radio"> <label for="awesomeness-0"> ' +
'<input type="radio" name="awesomeness" id="awesomeness-0" value="Really awesome" checked="checked"> ' +
'Really awesome </label> ' +
'</div><div class="radio"> <label for="awesomeness-1"> ' +
'<input type="radio" name="awesomeness" id="awesomeness-1" value="Super awesome"> Super awesome </label> ' +
'</div> ' +
'</div> </div>' +
'</form> </div> </div>',
buttons: {
success: {
label: "Save",
className: "btn-success",
callback: function () {
var name = $('#name').val();
var answer = $("input[name='awesomeness']:checked").val()
Example.show("Hello " + name + ". You've chosen <b>" + answer + "</b>");
}
}
}
}
);
I would like to know how to increase the spacing between the buttons so that they are placed more far apart and look spacious and the UI of the dialog box is more beautiful. I am not so good at these stuff. I have searched a lot. Please help me. Your help will be much appreciated. Thank you very much.
我想知道如何增加按钮之间的间距，使它们之间的距离更远，看起来更宽敞，并且对话框的UI更漂亮。我不太擅长这些东西。我已经搜索了很多。请帮我。您的帮助将不胜感激。非常感谢。
Please give some code and live example if possible. Thank you again.
如果可能，请提供一些代码和实例。再次感谢你。
回答by Ron
You can use or marginproperty to add spacing between buttons on a webpage.
您可以使用 或margin属性在网页上的按钮之间添加间距。
Using :
使用 ：
You can use between the closing tag of first button and opening tag of second button just like shown below.
您可以 在第一个按钮的结束标记和第二个按钮的开始标记之间使用，如下所示。
<button>Button 1</button> <button>Button 2</button>
you can add more for adding more space.
您可以添加更多 以添加更多空间。
Using marginattribute :
使用margin属性：
You can add spacing between two objects by adding marginon its sides. The CSS code is as follows,
您可以通过在两个对象的margin边上添加来在两个对象之间添加间距。CSS代码如下，
.btn_name{
margin-left:10px;
}
to add space on left side or you can add space on right side by using the following code,
在左侧添加空间，或者您可以使用以下代码在右侧添加空间，
.btn_name{
margin-right:10px;
}
