Html 显示：内联块；Firefox上的问题

我在Firefox和IE中都有内联块属性。我期待的结果和我在Chrome上得到的结果一样

Chrome桌面截图

Chrome和Firefox平板电脑（我必须在平板电脑视图中将“A”和“BC”放在一起）

Firefox桌面视图有一个问题。如您所见，E在屏幕截图中不可见。我用谷歌搜索了一下，但没有找到解决办法

HTML

---

如果你乱弄列宽，你可以看到发生了什么

基本上，它是由浏览器在一个宽度上创建的（在我的例子中：142px，该div中的内容大约是182px），因此浏览器“将E从页面上塞掉”，因为它无法容纳分配给它的空间

这个div大小问题是因为div的大小是在chrome加载时确定的，chrome不会再次检查。您可以通过将chrome宽度设置为非常大（使用浏览器功能缩小），然后刷新浏览器来看到这一点。您的e将根据需要显示，但如果您将浏览器缩小，然后再扩大，则媒体查询将重置该div的大小，并且不会因该div消失而后退

---

您可以通过使用相对宽度（例如，text{display:inline block；width:30%；}）或更改列表结构将的宽度设置为更大（或等于），或更改列表结构来解决此问题。

您可以看到，如果乱用列宽，会发生什么

基本上，它是由浏览器在一个宽度上创建的（在我的例子中：142px，该div中的内容大约是182px），因此浏览器“将E从页面上塞掉”，因为它无法容纳分配给它的空间

这个div大小问题是因为div的大小是在chrome加载时确定的，chrome不会再次检查。您可以通过将chrome宽度设置为非常大（使用浏览器功能缩小），然后刷新浏览器来看到这一点。您的e将根据需要显示，但如果您将浏览器缩小，然后再扩大，则媒体查询将重置该div的大小，并且不会因该div消失而后退

---

您可以通过使用相对宽度（例如，text{display:inline block；width:30%；}）或更改列表结构将的宽度设置为更大（或等于），或者更改列表结构来解决此问题。

“可能还有IE”您是否费心检查，或者只是假设？这样的一句话让我想知道你是否做过任何调试。这似乎是与

display:inline block。有关更多信息，请参阅…您的小提琴与HTML源代码不同。无论如何，我看不出这两个浏览器在使用小提琴时的行为有什么不同。@MrLister:在这里你可以看到不同@amit，这很奇怪；如果你从一个狭窄的镀铬窗口开始，然后将窗口变宽，E就会消失。但是如果你从一个大窗户开始，E就在那里。“很奇怪。”还有可能是“你费心去检查了吗，还是你只是在假设？这样的一句话让我想知道你是否做过任何调试。这似乎是与
display:inline block。有关更多信息，请参阅…您的小提琴与HTML源代码不同。无论如何，我看不出这两个浏览器在使用小提琴时的行为有什么不同。@MrLister:在这里你可以看到不同@amit，这很奇怪；如果你从一个狭窄的镀铬窗口开始，然后将窗口变宽，E就会消失。但是如果你从一个大窗户开始，E就在那里。很奇怪。
<div class="text-center">
    <div class="text">
        <div class="col-first">A</div>
        <div class="col-last">
            <ul class="links">
                <li>B</li>
                <li>C</li>
            </ul>
        </div>
        <div class="col-middle">
            <ul>
                <li>C</li>
                <li>D</li>
                <li>E</li>
            </ul>
        </div>
    </div>
</div>

ul{ margin:0; padding:0; list-style:none}

.text-center{text-align:center}
.text{ display:inline-block}
.col-first {
    float: left;
    padding-right: 20px;
}

.col-last {
    float: right;
}

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

.social li{float:left}
.col-middle li{ display:inline-block; padding:0 17px}

@media(max-width:768px){
    .col-first {float:none;display:inline-block; padding-right:10px; vertical-align:top}
    .col-last {float:none;display:inline-block}
    .col-middle { width:100%}
}