如何延长一个按钮的宽度，以填补div的宽度

-2

，我发现这个真棒的应用程序，让我来接我的按钮正是我想要它，它与CSS复制到我的代码的方法：http://livetools.uiparade.com/button-builder.html#如何延长一个按钮的宽度，以填补div的宽度

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

是否有可能在该按钮生成器中使用CSS创建按钮并使其看起来像在W3教程（填补div的宽度）？

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

来源

2015-07-03 André Sá

欢迎堆栈溢出！请回顾[**如何问**]（http://stackoverflow.com/help/how-to-ask）关于Stack Overflow的问题以及哪些类型的问题[**可以被问到**]（http：/ /stackoverflow.com/help/on-topic）和什么类型[**应避免。**]（http://stackoverflow.com/help/dont-ask） –

重复：http://stackoverflow.com/ question/12061139/making-button-go-full-width – Rvervuurt

添加宽度以包装'div'并将宽度添加到按钮为'100％'将完成这项工作。 ** [小提琴]（http://jsfiddle.net/Lhfqnxvw/）**。 PS-请考虑阅读@ Paulie_D评论的链接。 –

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

对于删除的垂直空间，如果你使用的是引导只需添加这种风格

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

注意，在片段我补充！重要的是，因为在代码片段引导的风格是后我的，但通常是不。

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

来源

2015-07-03 14:01:51

如何延长一个按钮的宽度，以填补div的宽度

回答

相关问题