我在stackoverflow上尝试了很多解决方案,但是没有任何效果。
a.buttongc {
border-radius: 5px;
background: #f5b220;
color: #fff;
font-size: 17px;
height: 44px;
line-height: 42px;
color: #fff;
text-decoration: none;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
white-space: nowrap;
margin: 10px;
text-overflow: ellipsis;
font-family: inherit;
cursor: pointer;
width: 100%;
overflow: hidden;
display: block;
}
.gc-button-center {
position: fixed;
left: 0;
right: 0;
display: block;
width: 100%;
bottom: 50px;
z-index: 999999999;
}
<div class="gc-button-center">
<a href="#" class="buttongc startgc">test</a>
</div>
我想在左边和右边留一个边距,但是它仅在左侧起作用,并且按钮位于滚动条上。有什么解决办法吗?
答案 0 :(得分:4)
不需要花哨的东西。只需删除您的width: 100%
如果显示为block
,并且未提供宽度,则宽度将自动调整大小以适合父项。
a.buttongc{
border-radius: 5px;
background: #f5b220;
color: #fff;
font-size: 17px;
height: 44px;
line-height: 42px;
color: #fff;
text-decoration: none;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
white-space: nowrap;
margin:10px;
text-overflow: ellipsis;
font-family: inherit;
cursor: pointer;
overflow:hidden;
display: block;
}
.gc-button-center{
position:fixed;
left:0;
right:0;
display:block;
width: 100%;
bottom: 50px;
z-index:999999999;
}
<div class="gc-button-center">
<a href="#" class="buttongc startgc">test</a>
</div>
答案 1 :(得分:3)
只需更改宽度:calc(100%-20px); 即可减去边距
a.buttongc{
border-radius: 5px;
background: #f5b220;
color: #fff;
font-size: 17px;
height: 44px;
line-height: 42px;
color: #fff;
text-decoration: none;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
white-space: nowrap;
margin:10px;
text-overflow: ellipsis;
font-family: inherit;
cursor: pointer;
width: 100%;
overflow:hidden;
display: block;
}
.gc-button-center{
position:fixed;
left:0;
right:0;
display:block;
width: calc(100% - 20px);
bottom: 50px;
z-index:999999999;
}
<div class="gc-button-center">
<a href="#" class="buttongc startgc">test</a>
</div>