多选水平

Question

我正在尝试建立这样的多重选择：

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

目前看起来像这样： JSFiddle演示

* {
    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：

* {
    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;
}

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

添加这个来选择

height:200px;

并将其添加到选项中：

float: left;

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