如何將按鈕對齊到右側？

下午好，我意識到這個話題已經有好幾次了，並且已經有了幾個解決方案，就像我從搜索論壇看到的一樣。如何將按鈕對齊到右側？

但解決方案，例如， <input type="button" value="Click Me" **style="float: right;"**>，

即使你成功地對齊按鈕向右，它們重疊我的頁腳按鈕應該是正確的頁腳上面。這是我的代碼：

.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>

來源

2016-12-31 Satanshu Mishra

代碼只是增添風采float:right您button

添加此button和footer之間

<div class="clearfix"></div>

和CSS 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>

來源

2016-12-31 11:30:08

謝謝它現在的工作，我將來會經常使用它。 –

您可以使用float:right和position屬性設置爲relative

來源

2016-12-31 11:21:41

對不起，還是一樣的結果。 –

要清楚，在CSS中，在.button中添加position：relative;和float：right ;. –

只是包裝他們兩個容器內與display:flex;flex-direction:row;，然後應用margin-right:0;到按鈕。

見下

.container{ 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 
.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 0 5px auto; 
 
} 
 
.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; 
 
}

<div class="container"> 
 
<button class="button"><span>Proceed to Next Lesson </span> 
 
</button> 
 

 
<footer class="containers-fluid text-center"> 
 
</footer> 
 
</div>

來源

2016-12-31 11:27:51 ab29007

如何將按鈕對齊到右側？

回答

相關問題