Multi-Selection horizontal

Question

I'm trying to build a multi-selection like that:

• The height and width of each option is 100.
• The options are listed horizontally.
• The options have to make a line break if they are out of the browsers width.

It looks like that at the moment: 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>

The only thing missing now is the line break.

I hope you can help! :)

Answer 1

You can just use the normal way of inserting line breaks in text. For <select> tags, the white-space style is changed to nowrap by default, so all you need to do is change it back to 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

Hi the following changes should do the trick

Remove overflow:hidden; from #data

add overflow:visible; to select

and add float:left; to option.

Answer 3

Add this to select

height:200px;

And add this to option:

float: left;

Fiddle: http://jsfiddle.net/6hotLutu/2/