Javascript 如何制作<；李>；在div内并排标记-html

我有一个下拉框（每年/每月），它相应地调用div。div中的

标记是垂直排列的，我需要它水平排列。 尝试并排放置

，甚至尝试

浮动：左

和

显示：内联块

。它似乎没有反映出什么。请提出一个想法。非常感谢你的帮助

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

每年
月刊


所有项目
123
343
127


所有日志
错误日志
警告




好啊

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

函数更改div（divId）
{
如果（divId==‘每年’）
{
document.getElementById（divId.style.display=“block”；
document.getElementById（'Monthly'）.style.display=“无”；
}else if（divId=='Monthly'）
{
document.getElementById（divId.style.display=“block”；
document.getElementById（'year'）.style.display=“无”；
}
}
$（'#time'）.change（）；
$（':checked'）。触发器（'click'）；

我的CSS：

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

ul.navbar-nav li：{
浮动：左；
}

输出：

---

将

列表内联

类添加到

ul

中，如下所示：

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

.navbar nav li{
浮动：左；
显示：内联块；
}


每年
月刊


所有项目
123
343
127


所有日志
错误日志
警告




好啊


函数更改div（divId）
{
如果（divId==‘每年’）
{
document.getElementById（divId.style.display=“block”；
document.getElementById（'Monthly'）.style.display=“无”；
}else if（divId=='Monthly'）
{
document.getElementById（divId.style.display=“block”；
document.getElementById（'year'）.style.display=“无”；
}
}
$（'#time'）.change（）；
$（':checked'）。触发器（'click'）；

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