Html 排列div和控制调整大小行为

（这是报告）

我把一个容器分成如下三部分：

• 容器：100%宽度
• A:内部将有0或1个按钮
• B:必须占据水平宽度的其余部分，直到所有子项都显示出来，没有包装，溢出被隐藏（内容流“离开屏幕”）
• C:无换行，内部将有0到3个按钮

当它变小时，B应该变小并隐藏任何不适合的内容：

当它调整得更大时，它应该调整大小，直到B中的所有内容都可见，然后C占据剩余空间：

当我调整它的大小时，我不能让C停留在屏幕上，而只是B变小

HTML:

<div class="container">
    <div class="left">
        <button>Button0</button>
    </div>
    <div class="nav-container">
        <ul class="middle">
            <li>Tab 1</li>
            <li>Tab 2</li>
            ..
            <li>Tab n</li>
        </ul>
    </div>
    <div class="right">
        <button>Button1</button>
        <button>Button2</button>
        <button>Button3</button>
    </div>
</div>

.container {
    width:100%;
    overflow: hidden;
    white-space: nowrap;
}

.left {
    float:left;
}

.middle {
    float:left;
    white-space: nowrap;
    overflow: hidden;
}

.right {
    width:auto;
    overflow:hidden;
}

ul {
    list-style-type: none;
}

.nav-container ul li {
    display: inline;
}

---

（这里是）

尝试从ul标签中删除“中间”类，并将该类添加到“nav container”div中，使其同时具有两个类

<div class="nav-container middle">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
        ..
        <li>Tab n</li>
    </ul>
</div>

表1
表2
..
表n

尝试从ul标记中删除“中间”类，并将该类添加到“nav container”div中，使其同时具有两个类

<div class="nav-container middle">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
        ..
        <li>Tab n</li>
    </ul>
</div>

表1
表2
..
表n

A和C是否具有固定宽度？你试过媒体查询吗？@giordanolima A和C会被修复，但直到页面添加按钮后才知道，按钮的数量可能会有所不同。A和C的宽度是固定的吗？你试过媒体查询吗？@giordanolima A和C会被修复，但直到页面添加按钮后才知道，按钮的数量可能会有所不同