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

时间：2016-11-11 14:22:41

标签： html css

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

6 个答案:

答案 0 :(得分：6)

您可以使用CSS3的column-count属性。

就像：

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

请看下面的代码：

＆＃13;
＆＃13; 
.sidebar-nav {
  column-count: 2;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！

答案 1 :(得分：3)

使用CSS选择器:nth-child(odd)和:nth-child(even)来提供float: left和float: right。您可能需要添加一些其他设置，不确定。

答案 2 :(得分：3)

你可以这样做：

＆＃13;
＆＃13; 
ul, li{
list-style:none;
}

.f-l{
  float:left;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：2)

尝试这样的事情：

ul {
  width: 250px;
}

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

答案 4 :(得分：1)

这样做的一种方法就是这样 - 把它分成2个彼此相邻的浮动：

//If you only have one series all you need is this first block of code
Set<Node> node = lineChart.lookupAll(".default-color0.chart-line-symbol.series0.");                    
    node.forEach((element) -> {
      //do somthing to each node in series0
      System.out.println(element.toString());//don't know if this will work. If it does it will all you to see each node. At the very least the node address.
 });

//If you have two series you need this. If you have more thant two series you need to copy this and change node2 to node3 everywhere in your copy.
Set<Node> node2 = lineChart.lookupAll(".default-color1.chart-line-symbol.series1.");                    
    node2.forEach((element) -> {
      //do somthing to each node in series1
      System.out.println(element.toString());//don't know if this will work. If it does it will all you to see each node. At the very least the node address.
 });

答案 5 :(得分：1)

这个JSFiddle应该帮助你：

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>

相关问题
最新问题