不對齊HTML/CSS的按鈕

-1

我的網頁上的按鈕出現問題。不對齊HTML/CSS的按鈕

這是他們看什麼，當我進入全屏喜歡

當我點擊下一步，然後回到這個相同的頁面，然後它變成這個

我想不管我怎麼努力當我點擊下一頁並返回到同一頁面時，它們總是最終不對齊。

按鈕

.button1{ 
    bottom: -70px; 
    right:0px; 
    position: absolute; 
} 

.button2{ 
    bottom: 28px; 
    left:8px; 
    position: absolute; 
}

的樣式按鈕

</div> 
    <div class="button1"> 
    <button type="submit" name="Next">Next</button> 
    </div> 

</form> 

    <form action="Time.html"> 
    <div class="button2"> 
    <button type="submit" name="Next">Back</button> 
    </div> 
    </form>

你也可以看到，他們並不在同一個形式的歸屬。

其中Next按鈕所屬

.form1 { 
    border: 8px solid #7B93F4; 
    left:0; 
    position: absolute; 
    top: 43%; 
    width: 98.9%; 
    text-align:center; 
}

我如何能解決這個問題，並防止這種情況發生的任何想法的形式？

來源

2017-06-27 Jopeth Deza

從兩個按鈕類中刪除底部並嘗試使用 – ISHIDA

@ISHIDA它沒有修復它，「後退」按鈕到達屏幕的左上角，而「下一步」按鈕僅向上移動了幾英寸 –

你可以改變的佈局一點，浮動按鈕：

.cont { 
 
    overflow: hidden; 
 
} 
 
.button1{ 
 
    float: left; 
 
} 
 

 
.button2{ 
 
    float: right; 
 
}

<div class="cont"> 
 
    <button class="button1">button1</button> 
 
    <button class="button2">button2</button> 
 
</div>

浮動更加靈活然後定位絕對的。

來源

2017-06-27 00:55:14 itacode

I已經嘗試了您的解決方案，但現在我的按鈕位於文本後面，我無法點擊它們。 –

修復了佈局，現在它工作正常，非常感謝你 –

您的HTML代碼有誤。編輯它以便清楚。

這兩個按鈕包含在不同的表單元素中，這些表單元素堆疊在它們的頂部，因爲它們是塊元素。將它們放在同一個表單元素中，並使用下面的樣式。

你應該儘量避免定位。我建議你代之以浮動按鈕。

你的HTML可能看起來像這樣

<form> 
    <div class="button1"> 
     <button type="submit" name="Next">Next</button> 
    </div> 
    <div class="button2"> 
     <button type="submit" name="Next">Back</button> 
    </div> 
</form>

和你的CSS這樣

.form1 { 
    /* your other codes */ 
    overflow: auto; 
} 

.button1{ 
    float: left; 
} 
.button2{ 
    float: right; 
}

希望工程。

來源

2017-06-27 01:01:07

它的工作，我已經修復佈局非常感謝你 –

不對齊HTML/CSS的按鈕

回答

相關問題