怎么做<li>標簽並排在 div 中 - html

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

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