css - 如果容器宽度不够，如何使 HTML 元素不跨到第二行？

Question

我正在动态添加文本框和选择元素，在占据容器标签的整个宽度之后，一个被添加到第二行。但是我不想要第二行，如果容器的宽度不足以容纳所有标签，我应该得到一个水平滚动条

<div class="addContainer">    
<label class="select ">
    <select class="form-control" name="selecname" placeholder="" id="id1">
        <option value="1">Pass</option>
        <option value="0">Fail</option>
    </select><i></i>
</label>
<label class="select ">
    <select class="form-control" name="selecname" placeholder="" id="id1">
        <option value="1">Pass</option>
        <option value="0">Fail</option>
    </select><i></i>
</label>
<label class="select ">
    <select class="form-control" name="selecname" placeholder="" id="id1">
        <option value="1">Pass</option>
        <option value="0">Fail</option>
    </select><i></i>
</label>
<label class="select ">
    <select class="form-control" name="selecname" placeholder="" id="id1">
        <option value="1">Pass</option>
        <option value="0">Fail</option>
    </select><i></i>
</label>
<label class="select ">
    <select class="form-control" name="selecname" placeholder="" id="id1">
        <option value="1">Pass</option>
        <option value="0">Fail</option>
    </select><i></i>
</label>
<label class="select ">
    <select class="form-control" name="selecname" placeholder="" id="id1">
        <option value="1">Pass</option>
        <option value="0">Fail</option>
    </select><i></i>
</label>
<label class="select ">
    <select class="form-control" name="selecname" placeholder="" id="id1">
        <option value="1">Pass</option>
        <option value="0">Fail</option>
    </select><i></i>
</label>
<label class="select ">
    <select class="form-control" name="selecname" placeholder="" id="id1">
        <option value="1">Pass</option>
        <option value="0">Fail</option>
    </select><i></i>
</label>
<label class="select ">
    <select class="form-control" name="selecname" placeholder="" id="id1">
        <option value="1">Pass</option>
        <option value="0">Fail</option>
    </select><i></i>
</label>
<label class="select ">
    <select class="form-control" name="selecname" placeholder="" id="id1">
        <option value="1">Pass</option>
        <option value="0">Fail</option>
    </select><i></i>
</label>
<label class="select ">
    <select class="form-control" name="selecname" placeholder="" id="id1">
        <option value="1">Pass</option>
        <option value="0">Fail</option>
    </select><i></i>
</label>
<label class="select ">
    <select class="form-control" name="selecname" placeholder="" id="id1">
        <option value="1">Pass</option>
        <option value="0">Fail</option>
    </select><i></i>
</label>
<label class="select ">
    <select class="form-control" name="selecname" placeholder="" id="id1">
        <option value="1">Pass</option>
        <option value="0">Fail</option>
    </select><i></i>
</label>

这是演示链接 http://jsfiddle.net/5mwFL/

Answer 1

你可以这样试试:<强> DEMO

CSS:

div {
    width:600px;
    height:60px;
    display:block;
    white-space:nowrap;
    overflow:auto;
}
input {
    height:26px;
    margin-right:5px;
    border:1px solid;
}

HTML:

<div>
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>