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

Question

我有一个下拉框(每年/每月)，它会相应地调用一个 div。 <li> div 内的标签是垂直排列的，我需要水平排列。 试图放置 <li>并排，甚至尝试过float:left和 display:inline-block .好像反射(reflect)不出来请提出一个想法。非常感谢您的帮助。

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

.navbar-nav li{
 float:left;
     display: inline-block;
}

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


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