我有一个图片横幅,我正试图在它上面添加一个按钮。按钮是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>
答案 0 :(得分:2)
将此代码提供给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>
答案 1 :(得分:1)
只需添加此课程
即可.img-wrapper .btn_action_1{
display:block;
margin-top:-100px
}
Fiddler https://jsfiddle.net/ov9rxuys/
答案 2 :(得分:1)
我建议使用按钮的绝对位置,因为没有其他选择
.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/