Итак, я работаю над проектом, где мне нужно моделировать ввод в HTML и CSS. Внутри ввода я должен иметь возможность вызывать функцию: my_cool_function(param0, param1, param2, param3)
. Поэтому для имитации ввода я создал неупорядоченный список, а внутри ul я добавляю функцию в качестве токена. Таким образом, my_cool_function (param0, param1, param2, param3) является полным токеном. Но param0
, param1
etcetera
также являются жетонами. Так что это текущая структура HTML у меня есть:Unordered List wrap with display: inline-block
<ul class="list">
<li class="token">
<span>My_cool_Function</span>
<ul class="tokenparams">
<li class="token">
<span>Param0</span>
</li>
<li class="token">
<span>Param1</span></li>
<li class="token">
<span>Param2</span>
</li>
<li class="token">
<span>Param3</span>
</li>
</ul>
</li>
</ul>
И это работает при условии, что ширина ул позволяет всей функции, чтобы соответствовать. Поэтому, когда ширина ниже, это своего рода разрывы, и я хочу, чтобы она обернулась красиво. Это CSS:
ul.list{
height: auto;
display: block;
width: 600px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
cursor: text;
}
li.token{
display: inline-block;
white-space: nowrap;
margin: 0 10px 0 0;
padding: 0 1px 0 1px;
border: 1px solid transparent;
height: 18px;
vertical-align: top;
cursor: pointer;
}
li.token span {
float:left;
}
li.active {
border-color: #63B9FF;
}
ul.tokenparams {
list-style-type: none;
float: left;
padding-left: 0;
}
ul.tokenparams::before {
content: "(";
float: left;
margin-left: 2px;
}
ul.tokenparams::after {
content: ")";
margin-right: 2px;
}
ul.tokenparams .token:not(:last-child)::after{
content: ",";
}
Так на 600px ширины это выглядит следующим образом:
И 355px этом происходит:
Это скрипку с указанием ошибки: http://jsfiddle.net/jvxzLt2s/
Я хотел бы создать как новую строку и разбить ее на param2
и param3
в новой строке.
Вы можете показать ожидаемый вывод изображения? –
это не обертывание для меня. –