Question

我有一个图片横幅，我正试图在它上面添加一个按钮。按钮是HTML格式而不是图像。但是，问题是我无法移动图像顶部的按钮。我相信它与按钮的边缘有关。我在Weebly网站上实现了以下代码，虽然按钮似乎非常适合编辑器，但在发布后，按钮显示在横幅的底部。这是我的HTML代码：

“保证金：-70px”似乎是正确的，但在发布后不适用。那有什么不对？有什么遗失的吗？

.btn_action_1 {
  border: 5px solid #000 !important;
  /* Change button border color */
  color: #000 !important;
  /* Change button text color */
  font-size: 22px;
  font-family: 'Ubuntu';
  line-height: 0;
  display: inline-block;
  padding: 10px 15px 10px;
  position: relative;
  text-decoration: none;
  z-index: 3;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.btn_action_1 span {
  left: 10px;
  position: relative;
  -o-transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.btn_action_1 .ico_arrow {
  background: url(ico_arrow_w.png) 0 center no-repeat;
  display: inline-block;
  height: 17px;
  width: 17px;
  position: relative;
  left: -12px;
  top: 0px;
  opacity: 0;
  filter: alpha(opacity=0);
  -o-transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.btn_action_1:hover {
  background: #000 !important;
  /* Change button background color when mouse over */
  color: #fff !important;
  /* Change button text color when mouse over */
}

.btn_action_1:hover span {
  left: -5px;
}

.btn_action_1:hover .ico_arrow {
  opacity: 1;
  filter: alpha(opacity=100);
  left: 5px;
}

@media (max-width: 479px) {
  .btn_action_1 {
    padding: 18px 30px;
  }
}

.btn_action_1:not(:hover)>.hover,
.btn_action_1:hover>.default {
  display: none
}

<img src="http://unlckpaypal.weebly.com/uploads/6/3/8/8/63884033/left_banner.png" style="margin: 10px 0px 0px 0px;width:440px;height:210px;">

<a href="http://unlckpaypal.weebly.com/trending-127809.html" style="margin:-70px 0px 0px 200px;width:180px;height:45px;" class="btn_action_1">
  <span>SHOP NOW</span>
  <i class="ico_arrow"></i>
</a>

Answer 1

将此代码提供给padding: 10px 15px 10px;到.btn_action_1 span这个课程，我认为它会起作用

.btn_action_1 {
border: 5px solid #000 !important; /* Change button border color */
color: #000 !important; /* Change button text color */
font-size: 22px;
font-family: 'Ubuntu';
line-height: 0;
display: inline-block;
padding: 10px 15px 10px;
position: relative;
text-decoration: none;
z-index: 3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn_action_1 span {
left: 10px;
position: relative;
-o-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.btn_action_1 .ico_arrow {
background: url(ico_arrow_w.png) 0 center no-repeat;
display: inline-block;
height: 17px;
width: 17px;
position: relative;
left: -12px;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
-o-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}

.btn_action_1:hover {
background: #000 !important; /* Change button background color when mouse over */
color: #fff !important; /* Change button text color when mouse over */
}

.btn_action_1:hover span {
left: -5px;
}
.btn_action_1:hover .ico_arrow {
opacity: 1;
filter: alpha(opacity=100);
left: 5px;
}
@media (max-width: 479px) {
.btn_action_1 {
    padding: 18px 30px;
}
}

.btn_action_1:not(:hover)>.hover,
.btn_action_1:hover>
.default {display:none}

<img src="http://unlckpaypal.weebly.com/uploads/6/3/8/8/63884033/left_banner.png" 
style="margin: 10px 0px -50px 0px;width:440px;height:210px; position:relative;">

<a href="http://unlckpaypal.weebly.com/trending-127809.html" 
style="margin:-30px 10px 10px 220px;width:180px;height:45px;  " 
class="btn_action_1">
<span>SHOP NOW</span>
<i class="ico_arrow"></i>
</a>

Answer 2

只需添加此课程

即可

.img-wrapper .btn_action_1{

  display:block;
  margin-top:-100px

}

Fiddler https://jsfiddle.net/ov9rxuys/

Answer 3

我建议使用按钮的绝对位置，因为没有其他选择

.btn_action_1 {
  position: absolute; /* remove margin from HTML if possible */
  bottom: 20px; /* adjust as you want it to be */
  right: 50px; /* adjust as you want it to be */
}

我有jsfiddle https://jsfiddle.net/Ls6coLb7/

按钮填充不起作用

3 个答案: