多选水平

Question

我正在尝试建立一个像这样的多选：

• 每个选项的高度和宽度为100.
• 水平列出选项。
• 如果选项超出浏览器宽度，则选项必须换行。

此刻看起来像是： JSFiddle Demo

* {
    box-sizing: border-box;
}
#data {
    overflow:hidden;
    padding:0;
	width:100vw;
}
select {
	padding:0;
	padding-left:1px;
	border:none;
	background-color:#eee;
	width:100vw;
}
option {
	height:100px;
	width:100px;
	border:1px solid #000;
	background-color:white;
	margin-left:-1px;
	display:inline-block;
}

<form>
    <div id="data">
		<select multiple size="1">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
    		<option>5</option>
			<option>6</option>
    		<option>7</option>
			<option>8</option>
			<option>9</option>
			<option>10</option>
			<option>11</option>
			<option>12</option>
		</select>
	</div>
</form>

现在唯一缺少的就是换行。

希望你能帮忙！ ：）

Answer 1

您可以使用在文本中插入换行符的常规方法。对于<select>代码，white-space样式默认情况下更改为nowrap，因此您需要做的就是将其更改回normal：

＆＃13;

＆＃13;

* {
    box-sizing: border-box;
}
#data {
    overflow:hidden;
    padding:0;
	width:100vw;
}
select {
	padding:0;
	padding-left:1px;
	border:none;
	background-color:#eee;
	width:100vw;
	white-space: normal;
	height:200px;
}
option {
	height:100px;
	width:100px;
	border:1px solid #000;
	background-color:white;
	margin-left:-1px;
	display:inline-block;
}

＆＃13;

<form>
<div id="data">
	<select multiple size="1">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
		<option>7</option>
		<option>8</option>
		<option>9</option>
		<option>10</option>
		<option>11</option>
		<option>12</option>
	</select>
</div>

</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下更改应该可以解决问题

从overflow:hidden;

中删除#data

将overflow:visible;添加到select

并将float:left;添加到option。

Answer 3

将其添加到选择

height:200px;

并将其添加到选项：

float: left;

小提琴：http://jsfiddle.net/6hotLutu/2/