将两个<li>放在一行html中

Question

我正在创建一个表单,我有一个侧面导航栏.我有大约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>内容数量增加,它就会下降,变得不可见.最后一个选项变为不可见或部分可见.我想按照我想要的方式实现它,我应该添加或删除什么？

Answer 1

您可以使用column-countCSS3的属性.

就像:

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

看下面的代码:

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

希望这可以帮助!