如何在一行上显示三个文本字段

Question

我试图在一行上显示三个文本字段。当屏幕较小时，这些文本字段应显示在同一行中。目前，当我缩小浏览器时，文本字段会移动到第二行。

我怎样才能做到这一点？

请参阅我的code

HTML 的

<div class="fields">
    <input type="text" class="name" />
    <span>&ndash;</span>
    <input type="text" class="name" />
    <input type="text" class="name2" />
</div>

CSS

.fields {
    border: 1px solid grey;
    width: 23%;
}
.name {
    display: inline;
    width: 11ex;
}
.name2 {
    display: inline;
    width: 8ex;
}

Answer 1

将 white-space：nowrap; 提供给.fields DIV。写得像这样：

.fields {
            border: 1px solid grey;
            width: 23%;
            white-space:nowrap;
        }

选中此http://jsfiddle.net/6tkF8/1/

Answer 2

这解决了您的问题：

.fields {
  display: inline;
}