Placing two
in one line html

Question

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?

score 11 · Answer 1 · answered Nov 11 '16 at 14:26

You can use column-count property of CSS3.

Just like:

.sidebar-nav {
  column-count: 2; /* Specify no. of columns */
}

Look at the snippet below:

.sidebar-nav {
  column-count: 2;
}

<div id="sidebar-wrapper">
  <h4 class="sidebar-brand">Select Field Type</h4>
      <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>
         <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>

Hope this helps!

Nice!!!! Now that's some fresh knowledge bites for me. Yummy!!!! :Q — Mohd Abdul Mujib, Nov 11 '16 at 15:08

score 4 · Answer 2 · answered Nov 11 '16 at 14:29

You can do like this :

ul, li{
list-style:none;
}

.f-l{
  float:left;
}

<div id="sidebar-wrapper">
  <h4 class="sidebar-brand">Select Field Type</h4>
      <ul class="sidebar-nav">
         <li>
           <ul class="f-l">
             <li>Single Line<li>
             <li>Multiple Select<li>
             <li>Phone Number<li>
             <li>Date<li>
             <li>Checkbox<li>
             <li>Decimal<li>
             <li>Auto Number<li>
           </ul>
        </li>
        <li>
          <ul class="f-l">
             <li>Pick List<li>
             <li>Email<li>
             <li>Mobile Number<li>
             <li>Time<li>
             <li>Radio<li>
             <li>Number<li>
           </ul>
        </li>
      
  
      </ul>

   </div>

score 3 · Answer 3 · answered Nov 11 '16 at 14:26

3

Use CSS selectors :nth-child(odd) and :nth-child(even) to give float: left and float: right. You may need to add some other settings, not sure.

answered Nov 11 '16 at 14:26

supereschek

94
9

score 3 · Answer 4 · answered Nov 11 '16 at 14:27

3

Try something like this:

ul {
  width: 250px;
}

li {
  display: inline-block;
  width: 50%
}

answered Nov 11 '16 at 14:27

Germano Plebani

3,461
3
26
38

score 2 · Answer 5 · answered Nov 11 '16 at 14:36

This JSFiddle should help you:

https://jsfiddle.net/9tyrhwec/

  <div id="sidebar-wrapper">
<ul class="sidebar-nav">
  <h4 class="sidebar-brand">Select Field Type</h4>
  <table>
  <tr>
    <td><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></td>
    <td><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></td>
  </tr>
  </table>


  </ul>

raphael75 · Answer 6 · 2016-11-11T15:28:15.020

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;
       width: 250px;
       position: relative;
       height: 650px;
    }
</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>

This works, but there is a hover problem. When I select something from the right side, only that element is highlighted. But, when I select something from the right side, the full line is highlighted. How can I get rid of that? — SSS, Nov 11 '16 at 14:43
Please try it now. I had made some edits that weren't saved for some reason, but they are in there now. — raphael75, Nov 11 '16 at 15:02
I made sume changes to the sidebar-nav_wrapper definition. Please update and try it. You may need to play with the width & height a little. — raphael75, Nov 11 '16 at 15:28
This doesn't work as expected. One column is displayed and below that the other column is displayed. Can you please refer to my css provided above and tell me the corrections? — SSS, Nov 12 '16 at 04:43

Placing two in one line html

6 Answers6

Placing two
in one line html