标签宽度因内容大小而增加

时间:2017-11-21 07:17:01

标签: jquery html css

我正在使用多级megamenu。尝试在选项卡中添加多个列表。但是当内容增加时,标签大小也会增加。因此其他标签会下降。如何使其宽度恒定,以便其他标签可以水平放置。

enter image description here

HTML:

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">       
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sample2<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <div class="container" >
              <div class="row">
                <ul class="nav nav-tabs">
                  <li class="active"><a href="#tab1primary" data-toggle="tab" data-item="#div2">Sample2.1</a>
                    <div id="div2" style="display: none" class="root_list">
                    <ul>
                    <li>Sample2.1.1
                    </li>
                    <li>Sample2.1.2
                    </li>
                    </ul>

           <ul>
                    <li>Sample2.1.1
                    </li>
                    <li>Sample2.1.2
                    </li>
                    </ul>
                      <ul>
                    <li>Sample2.1.1
                    </li>
                    <li>Sample2.1.2
                    </li>
                    </ul>
                      </div>
                  </li>

                  <li><a href="#tab2default" data-toggle="tab" data-item="#div1">Sample2.2</a>

                    <div id="div1" style="display: none">
                   <ul>
                    <li>Sample2.2.1
                    </li>
                    <li>Sample2.2.2
                    </li>
                      </ul></div>
                  </li>
                  <li><a href="#tab3primary" data-toggle="tab">Sample2.3</a></li>
                </ul>       


              </div>
            </div>


          </ul>
        </li>





      </ul>

    </div>
    <!--/.nav-collapse -->
  </div>
  <!--/.container-fluid -->
</nav>

演示中的CSS和脚本:

https://codepen.io/anon/pen/rYJEGw

0 个答案:

没有答案