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. 对于移动视图，请将按钮换成新行，但第一个选项更好，因为这样可以解决您的问题。