Html 如何在另一个div中强制内联div

我想在触摸、滚动或单击时制作一些类似滑块的东西。我需要强制div成为

内联块

——类似这样：

.sliderItem{
宽度：25%；
高度：自动；
显示：内联块；
背景：红色；
}

我正在使用引导，尽管我不喜欢它，因为我必须这样做。我在代码中没有看到任何会使div在

float:left

中浮动的内容。我的意思是，当它们不能排成一行时，它们会互相压在一起。我希望它们都在一行中，这样div就可以x-滚动了

---

我正在使用Bootstrap中的

.row>.col-md-12

。

您可以在父级上使用

flex

，它将所有内容保持在一行中

正文{
保证金：0；
}
.滑块{
显示器：flex；
溢出-x：自动；
溢出y：隐藏；
}
斯莱德利姆先生{
弹性：0.25%；
背景：红色；
高度：1米；
}
.sliderItem:n个孩子（奇数）{
背景：黑色；
}

---

您可以在父级上使用

flex

，它会将所有内容保持在一行中

正文{
保证金：0；
}
.滑块{
显示器：flex；
溢出-x：自动；
溢出y：隐藏；
}
斯莱德利姆先生{
弹性：0.25%；
背景：红色；
高度：1米；
}
.sliderItem:n个孩子（奇数）{
背景：黑色；
}

您可以在父级上使用

这里有一个工作演示（）：

滑块{
宽度：100vw；
最大宽度：100%；
溢出：隐藏；
溢出-x：自动；
空白：nowrap；
}
斯莱德利姆先生{
宽度：25%；
高度：100px；
显示：内联块；
背景：红色；
}

您可以在父级上使用

这里有一个工作演示（）：

滑块{
宽度：100vw；
最大宽度：100%；
溢出：隐藏；
溢出-x：自动；
空白：nowrap；
}
斯莱德利姆先生{
宽度：25%；
高度：100px；
显示：内联块；
背景：红色；
}

您的答案很好，但下面的“空白：nowrap”要简单得多。。。谢谢anyway@NoNameIamLame不客气，但无论如何，这也会将空白更改应用于

.sliderItem

元素的内容。假设您不需要，我猜您不需要，您必须在单个

.sliderItem

s中重置它，当

flex

已经这样做时，这是不必要的代码。我还认为

空白

更适合文本，而

flex

更适合页面布局/网格用户界面，这就是你正在做的。“该死的，这个标签不管用”，无论如何，感谢你的解释，但为什么我不应该使用它，即使它是为文本而做的，我也应该使用flex？它们之间有什么区别？在内联的div中，我将有一个图像，点击后会弹出大图像，其他什么都没有。@nonamiamlame它们是苹果和桔子

Flex

用于组织UI中的元素，创建网格/行/列等。

空白

用于处理内联内容之间的空间，传统上用于防止文本中断/换行。但是，假设您使用图像将文本添加到div中，就像图像有标题或其他内容一样，除非您在各个div上撤消，否则文本不会换行。您可以随意使用，但是

空白

有我刚才提到的警告，

flex

没有，而且两者都有效。。。苏…你的答案很好，但是下面的“空白：nowrap”要简单得多。。。谢谢anyway@NoNameIamLame不客气，但无论如何，这也会将空白更改应用于

.sliderItem

元素的内容。假设您不需要，我猜您不需要，您必须在单个

.sliderItem

s中重置它，当

flex

已经这样做时，这是不必要的代码。我还认为

空白

更适合文本，而

flex

更适合页面布局/网格用户界面，这就是你正在做的。“该死的，这个标签不管用”，无论如何，感谢你的解释，但为什么我不应该使用它，即使它是为文本而做的，我也应该使用flex？它们之间有什么区别？在内联的div中，我将有一个图像，点击后会弹出大图像，其他什么都没有。@nonamiamlame它们是苹果和桔子

Flex

用于组织UI中的元素，创建网格/行/列等。

空白

用于处理内联内容之间的空间，传统上用于防止文本中断/换行。但是，假设您使用图像将文本添加到div中，就像图像有标题或其他内容一样，除非您在各个div上撤消，否则文本不会换行。您可以随意使用，但是

空白

有我刚才提到的警告，

flex

没有，而且两者都有效。。。soo…谢谢，我在Div中尝试过，但不是父母我的坏反正我接受了，它起了作用。谢谢，我在Div中尝试过，但不是父母我的坏反正我接受了，它起了作用。