html - 使 float 元素保持其位置

Question

我有一个类似 this 的结构.接下来我面临的问题是:当屏幕的 x 轴小于 y 轴时，按钮工具栏(黑色)会跳到屏幕顶部。如果 x 轴更小，我的字段集会垂直扩展并跳出按钮工具栏。如何解决这个问题并使字段集保持其位置？我尝试使用 overflow 但没有成功。

Answer 1

不要使用float:left

将 .dhFieldset 元素设置为 display:inline-block; 然后将它们的容器 .dhButtonToolbar 设置为 white -空间:nowrap;

@media screen and (max-aspect-ratio: 1/1) { 
    .dhFieldset{
        display:inline-block; /*Added this line and remove the float:left*/
        height:37px;
        width:auto;
   }
}

@media screen and (max-aspect-ratio: 1/1) { 
    .dhButtonToolbar {
        height: 60px;
        left:5px;
        width:100%;
        right: 5px; 
        white-space:nowrap; /*added this line*/
    }
}

演示在 http://jsfiddle.net/gaby/Ueaa9/4/