Question

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

enter image description here

<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>

Answer 2

尝试将overflow:auto用于父级。

Answer 3

只需使用

overflow-x: scroll;

我认为有效

Answer 4

首先，在.addContainer中创建一个div。

<div class="addContainer">   
<div class='wrapper'>
<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>
</div>
</div>

然后应用以下CSS：

.addContainer {
    overflow: scroll; width: 500px; 
}

并给包装器div一个非常大的宽度：

.wrapper {
    width: 1000px;
}

如果你可以使用JQuery，那么你可以像这样动态创建.wrapper的宽度：

$(document).ready(function() {
    var container_width = 65 * $(".wrapper label").length;
    $(".wrapper").css("width", container_width);
});

将65更改为标签的宽度（我假设每个标签的宽度为65）

http://jsfiddle.net/5mwFL/1/

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

4 个答案: