html - 使浮动元素保持其位置

Question

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

Answer 1

不使用float:left

将.dhFieldset元素设置为display:inline-block;，然后将其容器.dhButtonToolbar设置为white-space: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/