我试图建立一个多选择这样的:多选择水平
- 高度和宽度的每个选项的是100
- 选项被水平列出。
- 如果选项超出浏览器宽度,则选项必须进行换行。
它看起来像此刻: JSFiddle Demo
* {
box-sizing: border-box;
}
#data {
overflow:hidden;
padding:0;
\t width:100vw;
}
select {
\t padding:0;
\t padding-left:1px;
\t border:none;
\t background-color:#eee;
\t width:100vw;
}
option {
\t height:100px;
\t width:100px;
\t border:1px solid #000;
\t background-color:white;
\t margin-left:-1px;
\t display:inline-block;
}
<form>
<div id="data">
\t \t <select multiple size="1">
\t \t \t <option>1</option>
\t \t \t <option>2</option>
\t \t \t <option>3</option>
\t \t \t <option>4</option>
\t \t <option>5</option>
\t \t \t <option>6</option>
\t \t <option>7</option>
\t \t \t <option>8</option>
\t \t \t <option>9</option>
\t \t \t <option>10</option>
\t \t \t <option>11</option>
\t \t \t <option>12</option>
\t \t </select>
\t </div>
</form>
现在唯一缺少的是换行符。
我希望你能帮忙! :)
谢谢,但它似乎仍然不工作 – stackoverflow
必须是您的浏览器,我的答案中的链接对我来说工作正常 –