CSS Float-right *有時*會導致元素出現在父div之外

Question

這可能是我的CSS或Chrome中的一個問題，我試圖找出答案。 基本上，我有被稱呼浮到其父div的右側，使其出現在右下角的兩個按鈕形式：

.event-block form { 
display: inline; 
float: right;      
}     

這部作品像1920×1080的寬屏預期。但是，當查看移動設備上的頁面（Chrome/Android）時，按鈕會出現在他們應該在其父應用外部的位置，如下所示：Screenshot 1

但是，如果我隨後導航到任何其他頁面，然後按「返回「，佈局現在是正確的，如Screenshot 2所示。

這是什麼模式？當使用float: right時會導致這種佈局錯誤的原因，以及爲什麼從不同頁面導航回來時它會自行更正？

PHP代碼：（這似乎只是着色標題到窗體的左後）

<form action="/script/event_rsvp.php" method="post"> 
      <input type="hidden" name="event-id" value=<?php echo "'".$e['event_id']."'"; ?> /> 
      <?php if($_SESSION['type']==0) : ?> 
       <input type="submit" class="sc-button" name="guest-rsvp" value="&#10004; Sign Up" /> 
      <?php elseif(in_array($e['event_id'], $signedUpIds)) : ?> 
       You are signed up for this event! 
       <input type="submit" class="sc-button" name="cancel" style="background-color: firebrick" value="&#128473; Cancel" /> 
      <?php else : ?> 
       <input type="submit" class="sc-button" name="member-rsvp" style="background-color: limegreen" value="&#10004; Sign Up" /> 
      <?php endif; ?> 

      <input type="button" class="sc-button" value="&#9993; Contact Host" /> 
     </form> 

Answer 1

問題：附加屏幕有不同的寬度。因此，由於文本（Sample free play event description）和Second box title（Sample Tournament）正在下降到下一行，因此導致屏幕寬度或使用的字體出現問題。

解決方案：

1. 您可以通過1px或2px減少下降段和標題的字體大小。
2. 對於移動視圖，請將按鈕換成新行，但第一個選項更好，因爲這樣可以解決您的問題。