Question

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

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

我是否可以在该按钮构建器中创建一个带有CSS的按钮，并使其显示在w3教程中（填充div的宽度）？

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

Answer 1

是的，你可以，如果你将使用bootstrap，只需将btn-block类添加到你的按钮，否则添加width: 100%，display: block;如果你想要所有按钮都是（填充div的宽度）我添加一个脚本，将类设置为所有按钮，如果没有将类设置为所需的。

如果您使用bootstrap，则删除垂直空间只需添加此样式

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

请注意，在我添加的片段中，重要的是因为在片段中，引导程序的样式在我的后面，但通常不是。

＆＃13;

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

＆＃13;

.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;
   }

＆＃13;

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

＆＃13;

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

1 个答案: