Multi-Выбор горизонтального

Question

Я пытаюсь построить мульти-выбор так:

• Высоты и ширину каждого варианта составляет 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>

Единственное, чего не хватает в настоящее время является разрыв строки.

Надеюсь, вы сможете помочь! :)

Answer 1

Добавить это выбрать

height:200px; 

И добавить это вариант:

float: left; 

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

Answer 2

Вы можете просто использовать обычный способ вставки переносы строк в тексте , Для <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>

Answer 3

Hi следующие изменения должны сделать трюк

overflow:hidden; Удалить из #data

добавить overflow:visible; к select

и добавить float:left; в option.