如果容器寬度不夠，如何使HTML元素不跨越第二行？

我正在添加文本框並動態選擇元素，其中一個佔據容器標籤的整個寬度後會添加到第二行。但我不希望第二線，insted的我應該得到一個水平滾動條，如果容器的寬度不足以容納所有標籤如果容器寬度不夠，如何使HTML元素不跨越第二行？

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/

來源

2014-07-17 Shamala suresh

添加一些HTML標記請。 –

使用空格：nowrap或保留最小寬度的選擇框 –

溢出：隱藏或滾動 –

你可以嘗試這樣的： 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>

來源

2014-07-17 10:06:36

大!!這就是我正在尋找的東西。 –

嘗試使用overflow:auto作爲父級。

來源

2014-07-17 09:56:50 qtgye

我試過了，它不工作:( –

只需使用

overflow-x: scroll;

我認爲工作

來源

2014-07-17 09:59:44

首先，創建內部.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到標籤的寬度（I假設每個標籤作爲65的寬度）

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

來源

2014-07-17 10:38:16 user2719875

如果容器寬度不夠，如何使HTML元素不跨越第二行？

回答

相關問題