html - 想要在按钮之间添加间距

标签 html css layout

我有一个简单的任务,就是在对话框中的按钮之间添加空格,就像下面从 http://bootboxjs.com/examples.html 获得的示例代码一样。 .想象一下,这个例子有多个按钮。比如保存、删除、取消、确认。

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>");
                }
            }
        }
    }
);

我想知道如何增加按钮之间的间距,使它们之间的距离更远,看起来更宽敞,对话框的用户界面更漂亮。我不太擅长这些东西。我已经搜索了很多。请帮我。非常感谢您的帮助。非常感谢。

如果可能,请提供一些代码和实例。再次感谢。

最佳答案

您可以使用  margin 属性在网页上的按钮之间添加间距。

使用   :

你可以使用  在第一个按钮的结束标记和第二个按钮的开始标记之间,如下所示。

<button>Button 1</button> &nbsp;&nbsp;&nbsp; <button>Button 2</button>

您可以添加更多 以增加更多空间。

使用 margin 属性:

您可以通过在其两侧添加 margin 来增加两个对象之间的间距。 CSS代码如下,

.btn_name{
    margin-left:10px;
}

要在左侧添加空格,或者您可以使用以下代码在右侧添加空格,

.btn_name{
    margin-right:10px;
}

关于html - 想要在按钮之间添加间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31198170/

相关文章:

javascript - Flexslider(jQuery): Pausing automatic animation

html - 使方形 div 始终填充父级而不会丢失其纵横比

html - 使用 flex order 属性为桌面和移动 View 重新排列元素

android - 包括 XML 布局

android - 如何为 Android Honeycomb 应用程序创建每周日历 View ?

html - CSS 不居中

html - 两个 css 规则 "seemingly"具有相同的特异性权重但不会产生相同的结果

javascript - 动画图像离开屏幕,并在它消失时隐藏它?

javascript - 基本的 javascript 按钮功能(隐藏/显示内容)

android - 上半部分的按钮不可点击