CSS自动宽度带浮动的中间元素

我有一个反应灵敏的顶栏菜单。在左边，我在一个

元素中有两个按钮，带有

浮动：left

。在右边，我有另一个

元素，带有

浮动：right

对齐。 在这两个列表的中间，我有一个接收动态文本的<代码> < /Case>元素。 这适用于大屏幕，但在小设备中，最后一个

会下降

JSfiddle： 调整结果面板的大小以查看我的问题

有没有办法解决这个问题？ 谢谢

而不是

#right { float:right; }

试一试

---

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

以下内容将首先使状态下拉列表…所有内容都与元素的顺序有关

#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>

#left{float:left；}
#左li{显示：内联块；}
#右{float:right；}
#状态{溢出：隐藏；浮动：左；}
li，p{填充：5px；边框：1px实心#000；}

项目1
项目2


项目3

此处有一些带有系统状态的长动态文本

给你想要的更多细节（如果不是这样的话），我再试试看

---

祝你好运

你还没有真正说明你想用它做什么。。。你想要什么？

开始一个新行，而不是推动

浮动：右
向下？现在项目可以叠加并且无法读取？这就产生了一个新问题。。。不要对布局使用绝对定位（至少在没有额外注意的情况下），因为您的方式是正确的！是这样的。。。但是为了避免更多的问题，我决定在小型设备上删除这个
。
#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>