logo标签列表

如何使一个DIV不换行？

htmlcssword-wrapnowrap
215

我需要创建一个包含多个其他 DIV 的容器 DIV 样式。要求是如果浏览器窗口缩小，这些 DIV 不会换行。

我尝试以下方式实现。

<style>
   .container
   {
      min-width: 3000px;
      overflow: hidden;
   }
   .slide
   {
      float: left;
   }
</style>
<div class="container">
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
</div>

这在大多数情况下是可行的。然而，在某些特殊情况下，渲染会出现错误。我发现在IE7的RTL中，容器DIV的宽度变为3000px，并且变得混乱。

是否有其他方法使容器DIV不换行？

1
我在我的代码中添加了这个标签：white-space: nowrap; 和这个标签：text-overflow: ellipsis; - saber tabatabaee yazdi
13个回答
1
0
<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
   <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>
-1

<span> 标签用于在文档中分组内联元素。
(来源)

虽然这是正确的，但它似乎根本没有回答问题。 - Quentin
这个回答非常完美，因为 span 和 div 在除了 div 被包裹外的所有方面都是相同的。而且你可以实现任何你想要的解决方法。 - Mike
3
那是否意味着你的建议是“使用<span>标签代替<div>标签”？因为这不是你之前说的话。 - Quentin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接