Question

我有一个下拉框（每年/每月），相应地调用div。 div内的<li>标签是垂直排列的，我需要它是水平的。尝试并排放置<li>，甚至尝试float:left和display:inline-block。它似乎没有反映出来。请提出一个想法。真的很感谢你的帮助。

我的HTML：

<div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- Messages: style can be found in dropdown.less-->
          <li class="paddingtopright">
                <select  class="select" name="time"  id="time" onload="javascript:changeDiv('Yearly');" onchange="changeDiv(this.options[this.selectedIndex].value);" style="padding-top:1px;padding-bottom:3px;"> 
                <option value="Yearly" selected="selected">Yearly</option> 
                <option value="Monthly">Monthly</option> 
                </select>
         </li>
         <div id="Yearly">
         <li class="paddingtopright">
                <select  class="select" name="itemList"  id="itemList" style="padding-top:1px;padding-bottom:3px;">
                    <option selected>All items</option>
                    <option value="123">123 </option>
                    <option value="343">343</option>
                    <option value="127">127</option>
                </select>
         </li>
         <li class="paddingtopright">
                <select  class="select" name="logList"  id="logList" style="padding-top:1px;padding-bottom:3px;">
                    <option selected>All Logs</option>
                    <option value="ErrorLog">ErrorLog</option>
                    <option value="Warnings">Warnings</option>
                </select>
         </li>
         </div>

          <div id="Monthly">
         <li class="paddingtoright"> 
            <input list="month" name="month" id="month" placeholder="Enter Month here">
                 <datalist id="month">
                    <option id="Jan" value="Jan">
                    <option id="May" value="May">
                    <option id="Aug" value="Aug">
                 </datalist>
         </li>
         </div>
         <li class="paddingtopright">
                <button id="mybutton">OK</button>
         </li>
        </ul>
      </div>

我的Javascript：

<script>
    function changeDiv(divId)
    {
        if(divId=='Yearly')
        {
            document.getElementById(divId).style.display="block";
            document.getElementById('Monthly').style.display="none";
        }else if(divId=='Monthly')
        {
            document.getElementById(divId).style.display="block";
            document.getElementById('Yearly').style.display="none";
        }
    }
    $('#time').change();
    $(':checked').trigger('click');
    </script>

我的CSS：

<style>
ul.navbar-nav li:{
 float:left;
}
</style>

输出：

Answer 1

<tag1>
    <tag2>
        <tag3 property="bag"/>
        <tag3 property="charger"/>
    </tag2>
</tag1>

Answer 2

将list-inline课程添加到ul，如下所示：

<ul class="nav navbar-nav list-inline">

如何在div -html中并排制作<li>标签

2 个答案: