如何扩展按钮的宽度以填充 div 的宽度答案

【问题标题】：How can I extend the width of a button to fill the div's width如何扩展按钮的宽度以填充 div 的宽度
【发布时间】：2015-09-21 08:52:40
【问题描述】：

我发现这个很棒的应用程序可以让我完全按照我想要的方式选择我的按钮并使用 CSS 将其复制到我的代码中：http://livetools.uiparade.com/button-builder.html#

但我希望我的按钮从 div 的一端延伸到另一端，就像在这个 w3 教程中使用“在线脚本”一样：http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_block&stacked=h

我是否可以在该按钮生成器中创建一个带有 CSS 的按钮，并使其看起来像 w3 教程中一样（填充 div 的宽度）？

另外，如何减少按钮之间的（垂直）空间？

【问题讨论】：

欢迎来到 Stack Overflow！请查看有关 Stack Overflow 的How to ask 问题以及can be asked 的问题类型和should be avoided. 的问题类型
复制：stackoverflow.com/questions/12061139/…
将宽度添加到包装div 并将宽度添加到按钮100% 将完成这项工作。 Fiddle。 PS- 请考虑阅读@Paulie_D 评论上的链接。
对不起朋友。我找不到之前提出的问题。但我仍然不知道如何减少按钮之间的垂直空间。我在哪里可以找到这方面的信息？ :)

标签： html css button

【解决方案1】：

可以，如果您要使用引导程序，只需将 btn-block 类添加到您的按钮，否则添加 width: 100%、display: block；如果您希望所有按钮都是（填充 div 的宽度），我添加一个脚本，将类设置为所有按钮，如果不将类设置为所需的。

如果您使用的是引导程序，只需添加此样式即可删除垂直空间

.btn-block + .btn-block{
    margin-top: 0;    
}

请注意，我在 sn-p 中添加了 !important，这是因为在 sn-p 中，引导程序的样式在我之后，但通常不是。

$(document).ready(function(){
    allbuttons = $(".button"); 
    allbuttons.addClass("btn-block");
})

.btn-block + .btn-block{
    margin-top: 0 !important;    
}
.button {
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 10.5px 21px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 17px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border: 1px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #fff;
   }
.button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="x">
<a href='#' class='button'>Button</a>
<a href='#' class='button'>Button</a>   
</div>

【讨论】：