css div溢出和动态水平尺寸
我有一个网页，显示大量表格数据，每个表格都需要放置在一条水平线上。 我在下面模拟了一个例子：
<html>
<style>
.outer{width:300px;height:300px;overflow: scroll;}
.inner{white-space: nowrap;}
.inline{float: left;}
</style>
<body>
<div class="outer">
<div class="inner">
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
</div>
</div>
</body>
</html>
我遇到了内部 div 包裹表格 div 的问题，除非我将其设置为具有较大的宽度，例如 4000px。 有没有一种好的方法可以让所有表格保持内联，即使它们超过了外部 div 的大小，仅使用 css ？
I have a web page that shows lots of tabular data and each of these tables needs to be placed on one horizontal line. I have mocked up an example below:
<html>
<style>
.outer{width:300px;height:300px;overflow: scroll;}
.inner{white-space: nowrap;}
.inline{float: left;}
</style>
<body>
<div class="outer">
<div class="inner">
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
</div>
</div>
</body>
</html>
I am having problems that the inner div wraps the table divs unless I set it to have a large width such as 4000px. Is there a nice way of keeping all of the tables inline even if they exceed the size of the outer div with just css?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
将
.inline{float: left;}更改为.inline{display:inline-block;}http://jsfiddle.net/QLe5r/
Change
.inline{float: left;}to.inline{display:inline-block;}http://jsfiddle.net/QLe5r/
我们这个属性：
Us this property:
这是因为 float: left 在 div 上“内联”。 相反，使用 display: inline-block（我认为对于 IE 也使用 display: inline。检查一下）。
This is because the float: left on divs "inline". Instead uses display: inline-block, (and display: inline for IE, I think. Check).
为什么在地球上有大量的 div 里面有大量的表格？！？ 这违背了使用表格存储表格数据的目的...当您处理表格数据时，您应该只使用表格...而不是应用无用的组合。
只需使用一张表格，并在每次需要添加更多数据时使用
stuff...td 无论如何都是基于水平的，因此您甚至不必费心使用 css让它延长。Why on EARTH do you have tons of tables inside tons of divs?!? That defeats the purpose of using tables for tabular data...when you are doing tabular data you should just use tables...not apply useless combinations.
Simply use one table and use
<td>stuff</td>each time you have more data to add...td's are horizontal based anyway so you wouldn't even have to bother with css to have it extend.