2014-12-19 88 views
4

我试图建立一个多选择这样的:多选择水平

  • 高度和宽度的每个选项的是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>

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

我希望你能帮忙! :)

回答

1

加入这个选择

height:200px; 

这增加选项:

float: left; 

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

+0

谢谢,但它似乎仍然不工作 – stackoverflow

+0

必须是您的浏览器,我的答案中的链接对我来说工作正常 –

3

你可以只使用文本插入换行符的正常方式。对于<select>标签,该white-space样式更改为nowrap默认情况下,因此,所有你需要做的就是改回normal

* { 
 
    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; 
 
\t white-space: normal; 
 
\t height:200px; 
 
} 
 
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 <select multiple size="1"> 
 
\t \t <option>1</option> 
 
\t \t <option>2</option> 
 
\t \t <option>3</option> 
 
\t \t <option>4</option> 
 
\t \t <option>5</option> 
 
\t \t <option>6</option> 
 
\t \t <option>7</option> 
 
\t \t <option>8</option> 
 
\t \t <option>9</option> 
 
\t \t <option>10</option> 
 
\t \t <option>11</option> 
 
\t \t <option>12</option> 
 
\t </select> 
 
</div> 
 

 
</form>

+0

不工作在Firefox – roYal

1

嗨以下变化应该做的伎俩

#data

删除overflow:hidden;添加overflow:visible;select

并将float:left;加到option