排列並排按鈕並排

我想排列多個按鈕並保持響應式設計。你能告訴我我在做什麼錯嗎？排列並排按鈕並排

這裏是的jsfiddle鏈接：jsfiddle

.round-button { 
 
    width: 25%; 
 
} 
 
.round-button-circle { 
 
    width: 100%; 
 
    height: 0; 
 
    padding-bottom: 100%; 
 
    border-radius: 50%; 
 
    border: 10px solid #cfdcec; 
 
    overflow: hidden; 
 
    background: #4679BD; 
 
    box-shadow: 0 0 3px gray; 
 
} 
 
.round-button-circle:hover { 
 
    background: #30588e; 
 
} 
 
.round-button a { 
 
    display: block; 
 
    float: left; 
 
    width: 100%; 
 
    padding-top: 50%; 
 
    padding-bottom: 50%; 
 
    line-height: 1em; 
 
    margin-top: -0.5em; 
 
    text-align: center; 
 
    color: #e2eaf3; 
 
    font-family: Verdana; 
 
    font-size: 1.2em; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
}

<div class="round-button"> 
 
    <div class="round-button-circle"> 
 
    <a href="http://example.com" class="round-button">Button!!</a> 
 
    <a href="http://example.com" class="round-button">Button!!</a> 
 
    </div> 
 
</div>

來源

2016-12-15 emre

你的意思並排 –

側要通過側 –

兩個圓面是的，我希望他們並肩 – emre

如果你想要兩個不同的圓圈中的兩個按鈕，那麼here是解決方案。

您應該將HTML結構改成這樣：

<div class="round-button"> 
    <div class="round-button-circle"> 
    <a href="http://example.com" class="round-button">Button!!</a> 
    </div> 
</div> 
<div class="round-button"> 
    <div class="round-button-circle"> 
    <a href="http://example.com" class="round-button">Button!!</a> 
    </div> 
</div>

這裏是CSS代碼：

.round-button { 
    width: 25%; 
    display: inline-block; 
    margin-right: 25px; 
} 
.round-button-circle { 
    width: 100%; 
    height: 0; 
    padding-bottom: 100%; 
    border-radius: 50%; 
    border: 10px solid #cfdcec; 
    overflow: hidden; 
    background: #4679BD; 
    box-shadow: 0 0 3px gray; 
} 
.round-button-circle:hover { 
    background: #30588e; 
} 
.round-button a { 
    display: block; 
    float: left; 
    width: 100%; 
    padding-top: 50%; 
    padding-bottom: 50%; 
    line-height: 1em; 
    margin-top: -0.5em; 
    text-align: center; 
    color: #e2eaf3; 
    font-family: Verdana; 
    font-size: 3vw; 
    font-weight: bold; 
    text-decoration: none; 
}

來源

2016-12-15 12:14:06

將'font-size'更改爲'3vw'以獲得更好的響應。嘗試調整[它在這裏]（https://jsfiddle.net/8zdhahnz/3/） –

@Jose Rui Santos我編輯並將您的想法添加到我的答案。謝謝。 –

不客氣。我們都在這裏分享和互相學習 –

改變你的CSS來

.round-button { 
    width: 50%; 
} 
.round-button-circle { 
    width: 100%; 
    height: 0; 
    padding-bottom: 100%; 
    border-radius: 50%; 
    border: 10px solid #cfdcec; 
    overflow: hidden; 
    background: #4679BD; 
    box-shadow: 0 0 3px gray; 
} 
.round-button-circle:hover { 
    background: #30588e; 
} 
.round-button a { 
    display: block; 
    float: left; 
    padding-top: 50%; 
    padding-bottom: 50%; 
    line-height: 1em; 
    margin-top: -0.5em; 
    text-align: center; 
    color: #e2eaf3; 
    font-family: Verdana; 
    font-size: 1.2em; 
    font-weight: bold; 
    text-decoration: none; 
}

的問題是按鈕有100%width。請參閱here。

來源

2016-12-15 12:08:20

這僅僅是爲您的信息，如果你想通過一側的兩個按鈕側div你可以簡單地做一個div和錨標籤，我已經修改你的代碼，就像這樣，請運行下面的代碼片段，

.button_wrap { 
 
\t text-align:center; 
 
} 
 
.button_wrap a { 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 50%; 
 
    border: 10px solid #cfdcec; 
 
    overflow: hidden; 
 
    background: #4679BD; 
 
    box-shadow: 0 0 3px gray; 
 
\t display:inline-table; 
 
\t text-align: center; 
 
    color: #e2eaf3; 
 
    font-family: Verdana; 
 
\t font-size: 1.2em; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
\t margin:0 5px; 
 
} 
 
.button_wrap a span { 
 
\t display:table-cell; 
 
\t vertical-align:middle; 
 
} 
 
.button_wrap a:hover { 
 
    background: #30588e; 
 
}

<div class="button_wrap"> 
 
    <a href="http://example.com"><span>Buttons</span></a> 
 
    <a href="http://example.com"><span>Buttons</span></a> 
 
</div><!-- /.button_wrap -->

來源

2016-12-15 12:28:21

試試這個代碼

.round-button { 
    width: 25%; 
    display:inline-block; 
    padding:10px; 
}

.round-button { 
 
    width: 25%; 
 
    display:inline-block; 
 
    padding:10px; 
 
} 
 
.round-button-circle { 
 
    width: 100%; 
 
    height: 0; 
 
    padding-bottom: 100%; 
 
    border-radius: 50%; 
 
    border: 10px solid #cfdcec; 
 
    overflow: hidden; 
 
    background: #4679BD; 
 
    box-shadow: 0 0 3px gray; 
 
} 
 
.round-button-circle:hover { 
 
    background: #30588e; 
 
} 
 
.round-button a { 
 
    display: block; 
 
    float: left; 
 
    width: 100%; 
 
    padding-top: 50%; 
 
    padding-bottom: 50%; 
 
    line-height: 1em; 
 
    margin-top: -0.5em; 
 
    text-align: center; 
 
    color: #e2eaf3; 
 
    font-family: Verdana; 
 
    font-size: 1.2em; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
}

<div class="round-button"> 
 
    <div class="round-button-circle"> 
 
    <a href="http://example.com" class="round-button">Button!!</a> 
 
    <a href="http://example.com" class="round-button">Button!!</a> 
 
    </div> 
 
</div> 
 

 
<div class="round-button"> 
 
    <div class="round-button-circle"> 
 
    <a href="http://example.com" class="round-button">Button!!</a> 
 
    <a href="http://example.com" class="round-button">Button!!</a> 
 
    </div> 
 
</div> 
 

 
<div class="round-button"> 
 
    <div class="round-button-circle"> 
 
    <a href="http://example.com" class="round-button">Button!!</a> 
 
    <a href="http://example.com" class="round-button">Button!!</a> 
 
    </div> 
 
</div>

來源

2016-12-15 12:52:03

排列並排按鈕並排

回答

相關問題