<分区>
我正在创建一个表单，其中有一个侧边导航栏。我有大约 15-20 个元素要显示。我想要两个 <li>在一行中。每个<li>包含指向模式的链接。当 <li>单击后，将打开一个模式。
我是这样写的:
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<h4 class="sidebar-brand">Select Field Type</h4>
<li><a href="#" data-toggle="modal" data-target="#SingleLine_Modal">Single Line</a></li>
<li><a href="#" data-toggle="modal" data-target="#PickList_Modal">Pick List</a></li>
<li><a href="#" data-toggle="modal" data-target="#MultiSelect_Modal">Multi Select</a></li>
<li><a href="#" data-toggle="modal" data-target="#MultiLine_Modal">Multi Line</a></li>
<li><a href="#" data-toggle="modal" data-target="#Email_Modal">Email</a></li>
<li><a href="#" data-toggle="modal" data-target="#Phone_Modal">Phone Number</a></li>
<li><a href="#" data-toggle="modal" data-target="#Mobile_Modal">Mobile Number</a></li>
<li><a href="#" data-toggle="modal" data-target="#Date_Modal">Date</a></li>
<li><a href="#" data-toggle="modal" data-target="#Time_Modal">Time</a></li>
<li><a href="#" data-toggle="modal" data-target="#DateTime_Modal">Date-Time</a></li>
<li><a href="#" data-toggle="modal" data-target="#CheckBox_Modal">Checkbox</a></li>
<li><a href="#" data-toggle="modal" data-target="#Radio_Modal">Radio</a></li>
<li><a href="#" data-toggle="modal" data-target="#Decimal_Modal">Decimal</a></li>
<li><a href="#" data-toggle="modal" data-target="#Number_Modal">Number</a></li>
<li><a href="#" data-toggle="modal" data-target="#AutoNumber_Modal">Auto Number</a></li>
</div>
现在是这样的:
Single Line
Pick List
Multi Select
Multi Line
Email
Phone Number
Mobile Number
Date
Time
Date-Time
Checkbox
Radio
Decimal
Number
Auto Number
但是，我希望它看起来像这样:
| Single Line | Pick List |
| Multiple Select | Email |
| Phone Number | Mobile Number |
| Date | Time |
| Checkbox | Radio |
| Decimal | Number |
| Auto Number | (further li) |
这是我的CSS:
#sidebar-wrapper {
z-index: 1000;
position: fixed;
display: table-cell;
left: 250px;
width: 0;
height: 600px;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
display: inline-block;
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
我还应该怎么做，才能以我想要的方式得到它？
我想要那样，因为一旦 <li> 的数量内容增加，它下降，变得不可见。最后一个选项变得不可见或部分可见。我为了以我想要的方式实现它，我应该添加或删除什么？