如何使div在一行中正确显示？

Question

嘿我正在尝试将一行中的几个div作为表头。但是当我将窗口大小缩小时，一些标题会转到下一行。 如何将它们保持在一行并在需要时缩小整个div的大小？

Answer 1

尝试使用display: table-cell;来阻止div向下流动。如果你想让它们调整大小，那么像Bootstraps布局这样的东西可以帮助你。

Answer 2

您需要以百分比或大众为单位设置div的宽度。

在这里，它将占用父div的20％

.example_div {
    width: 20%;
}

这里它将占用设备宽度的20％（可能比父宽度大）

.example_div {
    width: 20vw;
}

您可以将这些与最大宽度结合使用，以允许更大的屏幕保持您设置的初始宽度行为，我假设下面是像素。

此处，它将设置最大宽度，但在需要时按百分比缩小。

.example_div {
    max-width: 100px;
    width: 20%;
}