如何延長一個按鈕的寬度，以填補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的寬度

回答

相關問題