小编sta*_*low的帖子

多选水平

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

  • 每个选项的高度和宽度为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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

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

希望您能提供帮助!:)

css html5 html-select

6
推荐指数
2
解决办法
4752
查看次数

标签 统计

css ×1

html-select ×1

html5 ×1