排列并排按钮并排

我想排列多个按钮并保持响应式设计。你能告诉我我在做什么错吗？排列并排按钮并排

这里是的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

排列并排按钮并排

回答

相关问题