CSS Float-right *が*親divの外側に要素を表示することがあります

Question

これは私のCSSやChromeのバグに問題がある可能性があります。 1920x1080のようなワイド画面で期待通り、この作品

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

： は基本的に、私は右下隅に表示されるように、親のdivの右側に浮くようにスタイル設定され二つのボタンを持つフォームを持っています。しかし、モバイル（Chrome/Android）でページを表示すると、ここに表示されているように、親divの外側にボタンが表示されます。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

問題：添付画面は異なる幅を有しています。テキスト（サンプルフリープレイイベントの説明）とセカンドボックスタイトル（サンプルトーナメント）が次の行にドロップされているため、画面の幅や使用フォントがより明るくなります。

ソリューション：

1. あなたは1pxまたは2pxで落とし、段落とタイトルのフォントサイズを小さくすることができます。
2. モバイルビューの場合は、新しい行でボタンを押しますが、最初のオプションは、ドロップする問題も解決されるため、より優れています。