如何将按钮右对齐? [英] How to align a Button to the Right?
本文介绍了如何将按钮右对齐?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
下午好,我知道这个主题已被问过几次,并且从搜索您的论坛中可以看到一些解决方案.
Good Afternoon, I realize this topic has been asked several times and has got several solutions to as I have seen from searching your forums.
但是诸如< input type ="button" value =点击我" ** style ="float:right;" **>
,
即使确实成功地将按钮向右对齐,它们也与我的页脚重叠,因为按钮应该位于页脚的正上方.这是我的代码:
Even though do successfully align the button to the right, they overlap my footer as the button is supposed to be right above the footer. This is my code:
.button {
border-radius: 4px;
background-color: #0FA0FF;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.containers-fluid {
padding: 20px 50px;
background-color: #000000;
color: white;
}
<button class="button"><span>Proceed to Next Lesson </span>
</button>
<footer class="containers-fluid text-center">
</footer>
推荐答案
只需将样式 float:right
添加到您的 button
Just add style float:right
to your button
将此添加到 button
和 footer
<div class="clearfix"></div>
和 clearfix
.clearfix{
clear: both;
}
详细了解 clearfix
.button {
border-radius: 4px;
background-color: #0FA0FF;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
float: right;
display: block;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.containers-fluid {
padding: 20px 50px;
background-color: #000000;
color: white;
}
.clearfix{
clear: both;
}
<button class="button"><span>Proceed to Next Lesson </span>
</button>
<div class="clearfix"></div>
<footer class="containers-fluid text-center">
</footer>
这篇关于如何将按钮右对齐?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文