怎么做<li>标签并排在 div 中 - html

Question

I have a dropdown box (Yearly/Monthly), which calls a div accordingly. the <li> tags inside the div are vertically arranged, I need it horizontal. Trying to place <li> side-by-side, even tried float:left and display:inline-block . It doesn't seem to reflect. Please suggest an idea. Really appreciate your help.

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

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

My CSS:

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

Output:

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>

Answer 2

将list-inline类添加到ul如下所示：

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