按钮跳转到新行（css）

Question

我的应用程序在小屏幕上应该看起来不错。如果尺寸正常，一切看起来都不错。但是当屏幕太小时，我的按钮开始混乱。

红色正方形代表图像，黄色代表一些文字，蓝色代表按钮。

通常，被显示在顶部的版本（正确的） 当屏幕小，第二情况发生，当底部按钮跳转到一个新行。

理想情况下，两个按钮应该保持一个在另一个之上。这是我的css代码：

{ 
    background-color: #6b89ac; 
    border: 1px solid #89a9d0; 
    border-bottom-color: #1d4474; 
    color: white; 
    font-weight: bold; 
    text-decoration: none; 
    padding: 2px 5px 2px 5px; 
    margin-bottom: 3px; 
    text-align: center; 
    display: inline-block; 
    width: 100px; 
} 

Answer 1

它发生在小屏幕上，因为按钮被推得足够远以滑到图片下方。尝试将文本和按钮一起包装在一个div中。然后这些按钮将被该新div的左边界所约束。

根据你的代码，新的div也可能需要overflow: hidden。

Answer 2

在第一种情况下，第二个蓝色方块仅仅因为红色方块的高度足以阻止其清除而被右方保留。

为了保证蓝盒子留到右右，浮动他们的权利{float:right} 你应该再包装每个组在一个div使第二红色框不跑成第1组的中间。而且您可能需要对该div应用cleafix解决方案，以确保其高度随着添加浮点数而适当增加。

clearfix出处：
1. What methods of ‘clearfix’ can I use?
2. The New Clearfix Method

（我喜欢＃2）

Answer 3

可以给身体的固定宽度。然后，当窗口宽度减小时，您的布局不会改变。您可以使用overflow-x属性来控制滚动条的行为