CSS樣式的按鈕

Question

我遇到過一些樣式按鈕的CSS，這些樣式對我很有用。 但是我有代碼根據按鈕文本創建一個自擴展寬度按鈕。

我想將兩個按鈕彼此疊放，使它們具有完全相同的寬度，而不管按鈕文本如何。

誰能告訴我如何調整現有CSS來做到這一點？

 /*-- MY CSS READ MORE BUTTON --*/ a.btn, .btn, .btn:focus, input[type="submit"], a.more-link { padding: 13px 30px; line-height: 1; color: #000000; border: 1px solid #d9d9d9; border-radius: 3px; text-align: left; text-shadow: none; text-decoration: none; vertical-align: middle; cursor: pointer; background: #ffffff; filter: none; box-shadow: none; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; } a, a.btn, .btn, .btn:focus, input[type="submit"], .btn:hover, input[type="submit"]:hover, { -webkit-transition: color 0.2s ease, background 0.6s ease, border-color 0.2s ease; transition: color 0.2s ease, background 0.6s ease, border-color 0.2s ease; } .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } /*-- EDIT HERE FOR COLOUR CHANGE ON HOVER --*/ .btn:hover, input[type="submit"]:hover, a.more-link:hover { background: #7acfd6; border-color: #cccccc; color: #fff; } /*-- EDIT HERE FOR ACTIVE BUTTON COLOUR --*/ .btn:active, .btn-primary, .btn-primary:focus { color: #ffffff; background: #000000; box-shadow: none; } .btn-primary:hover, .btn-primary:active { background: #000000; } .btn.alt { background: #9BA78A; border-color: #9BA78A; color: #ffffff; } .btn.alt:hover { background: #000000; color: #ffffff; border-color: #000000; } 

 <p style="text-align: center;"><a class="btn" href="#">Learn more</a> </p> 

Answer 1

您只需通過為按鈕提供CSS規則“ display：block”，就可以使按鈕成為block元素。 然后，您可以使用“ width：200px”為他們提供固定寬度，例如200px。 有關工作示例，請參見下面的代碼。

 /*-- MY CSS READ MORE BUTTON --*/ a.btn, .btn, .btn:focus, input[type="submit"], a.more-link { padding: 13px 30px; line-height: 1; color: #000000; border: 1px solid #d9d9d9; border-radius: 3px; text-align: left; text-shadow: none; text-decoration: none; vertical-align: middle; cursor: pointer; background: #ffffff; filter: none; box-shadow: none; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; display: block; width: 200px; margin: 10px auto; } a, a.btn, .btn, .btn:focus, input[type="submit"], .btn:hover, input[type="submit"]:hover, { -webkit-transition: color 0.2s ease, background 0.6s ease, border-color 0.2s ease; transition: color 0.2s ease, background 0.6s ease, border-color 0.2s ease; } .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } /*-- EDIT HERE FOR COLOUR CHANGE ON HOVER --*/ .btn:hover, input[type="submit"]:hover, a.more-link:hover { background: #7acfd6; border-color: #cccccc; color: #fff; } /*-- EDIT HERE FOR ACTIVE BUTTON COLOUR --*/ .btn:active, .btn-primary, .btn-primary:focus { color: #ffffff; background: #000000; box-shadow: none; } .btn-primary:hover, .btn-primary:active { background: #000000; } .btn.alt { background: #9BA78A; border-color: #9BA78A; color: #ffffff; } .btn.alt:hover { background: #000000; color: #ffffff; border-color: #000000; } 

 <p style="text-align: center;"><a class="btn" href="#">Learn more</a> </p> <p style="text-align: center;"><a class="btn" href="#">Click here</a> </p> 

Answer 2

針對您問題的簡單調整。 。 剛剛在.btn添加了min-width:130px .btn

 /*-- MY CSS READ MORE BUTTON --*/ a.btn, .btn, .btn:focus, input[type="submit"], a.more-link { padding: 13px 30px; line-height: 1; color: #000000; border: 1px solid #d9d9d9; border-radius: 3px; text-align: left; text-shadow: none; text-decoration: none; vertical-align: middle; cursor: pointer; background: #ffffff; filter: none; box-shadow: none; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; } a, a.btn, .btn, .btn:focus, input[type="submit"], .btn:hover, input[type="submit"]:hover, { -webkit-transition: color 0.2s ease, background 0.6s ease, border-color 0.2s ease; transition: color 0.2s ease, background 0.6s ease, border-color 0.2s ease; } .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; min-width:130px } /*-- EDIT HERE FOR COLOUR CHANGE ON HOVER --*/ .btn:hover, input[type="submit"]:hover, a.more-link:hover { background: #7acfd6; border-color: #cccccc; color: #fff; } /*-- EDIT HERE FOR ACTIVE BUTTON COLOUR --*/ .btn:active, .btn-primary, .btn-primary:focus { color: #ffffff; background: #000000; box-shadow: none; } .btn-primary:hover, .btn-primary:active { background: #000000; } .btn.alt { background: #9BA78A; border-color: #9BA78A; color: #ffffff; } .btn.alt:hover { background: #000000; color: #ffffff; border-color: #000000; } 

 <p style="text-align: center;"><a class="btn" href="#">Learn more</a> </p> <p style="text-align: center;"><a class="btn" href="#">Learn</a> </p> <p style="text-align: center;"><a class="btn" href="#">More More More</a> </p> 

Answer 3

這是一個建議：

• 使父級p元素inline-block顯示

 p { display: inline-block; } .btn { display: flex; flex-direction: column; margin: 2px 0; } /*-- MY CSS READ MORE BUTTON --*/ a.btn, .btn, .btn:focus, input[type="submit"], a.more-link { padding: 13px 30px; line-height: 1; color: #000000; border: 1px solid #d9d9d9; border-radius: 3px; text-align: left; text-shadow: none; text-decoration: none; vertical-align: middle; cursor: pointer; background: #ffffff; filter: none; box-shadow: none; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; } a, a.btn, .btn, .btn:focus, input[type="submit"], .btn:hover, input[type="submit"]:hover, { -webkit-transition: color 0.2s ease, background 0.6s ease, border-color 0.2s ease; transition: color 0.2s ease, background 0.6s ease, border-color 0.2s ease; } .btn { padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } /*-- EDIT HERE FOR COLOUR CHANGE ON HOVER --*/ .btn:hover, input[type="submit"]:hover, a.more-link:hover { background: #7acfd6; border-color: #cccccc; color: #fff; } /*-- EDIT HERE FOR ACTIVE BUTTON COLOUR --*/ .btn:active, .btn-primary, .btn-primary:focus { color: #ffffff; background: #000000; box-shadow: none; } .btn-primary:hover, .btn-primary:active { background: #000000; } .btn.alt { background: #9BA78A; border-color: #9BA78A; color: #ffffff; } .btn.alt:hover { background: #000000; color: #ffffff; border-color: #000000; } 

 <p style="text-align: center;"> <a class="btn" href="#">Learn more</a> <a class="btn" href="#">Learn more and more</a> <a class="btn" href="#">Learn more and more and more</a> </p> <hr> <p style="text-align: center;"> <a class="btn" href="#">Learn more</a> <a class="btn" href="#">Learn more and more</a> <a class="btn" href="#">Learn more and more and more and more again</a> </p>