我正在尝试并排排列多个按钮并保持响应式设计。 你能告诉我这里我做错了什么吗?
以下是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>
&#13;
答案 0 :(得分:2)
如果您想在两个不同的圈子中使用两个按钮,那么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;
}
答案 1 :(得分:1)
这只是为了您的信息,如果你想并排两个按钮就不需要太多的div
你可以简单地用一个div和锚标签,我已经像这样修改了你的代码,请运行以下代码段,
.button_wrap {
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;
display:inline-table;
text-align: center;
color: #e2eaf3;
font-family: Verdana;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
margin:0 5px;
}
.button_wrap a span {
display:table-cell;
vertical-align:middle;
}
.button_wrap a:hover {
background: #30588e;
}
&#13;
<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 -->
&#13;
答案 2 :(得分:0)
将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。
答案 3 :(得分:0)
试试这段代码
.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;
}
&#13;
<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>
&#13;