Question

我有一个响应式顶栏菜单。在左侧，我在<ul>元素中有float:left的2个按钮。在右侧，我有另一个<ul>元素与float:right对齐。在两个列表的中间，我有一个<p>元素接收动态文本。

这适用于大屏幕，但在小型设备中，最后<ul>会停止运行。

JSfiddle：http://jsfiddle.net/49zjn/1/ 调整“结果”面板的大小以查看我的问题。

如何解决这个问题？感谢

Answer 1

而不是

#right { float:right; }

尝试

#right { position:absolute; top:0; right:0 }

Answer 2

您想要的行为是什么？您希望状态调整大小还是第一个下拉到下一行？

以下将使状态首先下拉......这完全取决于元素的顺序。

#left { float:left; }
#left li { display:inline-block; }
#right { float:right; }
#status { overflow: hidden; float:left; }
li, p { padding:5px; border: 1px solid #000; }

<div id="bar">
    <ul id="left">
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    <ul id="right">
        <li>Item 3</li>
    </ul>
    <p id="status">Some long dynamic text here with system status</p>
</div>

详细说明你想要的东西（如果不是这样的话），我会再接受一次破解。

祝你好运！

CSS自动宽度中间元素与浮动

2 个答案: