duddosai duddosai - 25 days ago 7
CSS Question

Placing two <li> in one line html

I'm creating a form, where I have a side navbar. I have around 15-20 elements to be displayed. I want two

<li>
in one line. Each
<li>
contains a link to a modal. When an
<li>
is clicked, a modal opens.

This is how I've written:

<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>


This is how it looks now:

Single Line
Pick List
Multi Select
Multi Line
Email
Phone Number
Mobile Number
Date
Time
Date-Time
Checkbox
Radio
Decimal
Number
Auto Number


But, I want it to look like this:

| Single Line | Pick List |
| Multiple Select | Email |
| Phone Number | Mobile Number |
| Date | Time |
| Checkbox | Radio |
| Decimal | Number |
| Auto Number | (further li) |


This is my 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;
}


What else should I do, so that I can get it in the way I want?

I want it that way because, once the number of
<li>
contents increase, it goes down, and becomes invisible. The last option becomes invisible or partially visible. I order to achieve it in the way I want, what should I add or remove?

Answer

One way to do it would be like this - break it up into 2 ul's that are floated next to each other:

<style>
    .sidebar-nav_wrapper
    {
       float:left;
       margin-left:5px;
    }
</style>

<div id="sidebar-wrapper">
  <h4 class="sidebar-brand">Select Field Type</h4>
        <div class="sidebar-nav_wrapper">

          <ul class="sidebar-nav">

             <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>
        </ul>
        </div>
        <div class="sidebar-nav_wrapper">
          <ul class="sidebar-nav">
             <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>
 </ul>
        </div>
   </div>
Comments