使用溢出隐藏使内容不换行答案

【问题标题】：Use overflow hidden to make content not wrap使用溢出隐藏使内容不换行
【发布时间】：2013-03-17 10:41:17
【问题描述】：

我想要这个：

但我明白了：

使用它来设置包含 div 的样式：

.option {
    display:inline-block;
    width:100%;
    white-space:nowrap;
    overflow:hidden;
    margin:10%;
}

剩下的就是 ~~nothing~~ ：http://jsfiddle.net/n2LtN/

缺少什么？

【问题讨论】：

【解决方案1】：

我通过使用 display:inline-block 而不是 display:inline 来修复它，没有 floating ：

span, input[type="checkbox"] {
    display:inline-block;
    *display:inline; /*That's for IE*/
    *zoom:1; /*That's for IE*/
    width:auto;
}

查看工作中的fiddle。

【讨论】：

【解决方案2】：

从span, input[type="checkbox"] 中删除float:left

您应该阅读浮动的工作原理。

【讨论】：

好的。我正在尝试 css-tricks.com/all-about-floats、coding.smashingmagazine.com/2009/10/19/… 和 webdesign.about.com/od/advancedcss/a/aa010107.htm 你能推荐其他有帮助的吗？
@CrisStringfellow 您的浮动也可以工作，但您需要适当的宽度、clearfix 并尝试使用list elements (<li>) 而不是spans。我更喜欢 inline-block，它很容易使用！
@soyuka 是的内联块非常好。我刚刚在css-tricks.com/all-about-floats 了解到，你只能浮动块元素，不能内联。
浮动元素堆叠在彼此的右侧（或左侧），但如果容器中没有剩余空间，即使您不允许文本中的换行符也会换行。