Question

  .dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
}

<li style="padding-left:10px;padding-top:10px" class="level1 nav-2-<?php echo $demmn; ?> first dropdown" >
          <a href="#" style="color:#fff">
             <span>TEST</span>
          </a>
          <ul class="dropdown-menu" id="menu1" style="background:#000;">
               <li style="width:50%"><a href="#" style="color:#fff">TEST</a></li>
               <li style="width:50%"><a href="#" style="color:#fff">TEST</a></li>
               <li><a href="#" style="color:#fff">TEST</a></li>
               <li><a href="#" style="color:#fff">TEST</a></li>
          </ul>
</li>

我希望它像这样显示在水平方向

请帮帮我，谢谢！

Answer 1

我认为这就是你要找的东西

＆＃13;

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
}

.menu{
   max-width: 400px;
}

.menu>li{
  background-color: #111;
}

.dropdown-menu li {
    width: 30%;
    display: inline-block;
    background-color: #111;
}

＆＃13;

<ul class="menu">

<li  style="padding-left:10px;padding-top:10px" class="level1 nav-2-<?php echo $demmn; ?> first dropdown" >
                  <a href="#" style="color:#fff">
                      <span>TEST</span>
                  </a>
                <ul class="dropdown-menu" id="menu1" style="background:#111;">
                  <li><a href="#" style="color:#fff">TEST</a></li>
                  <li><a href="#" style="color:#fff">TEST</a></li>
                  <li><a href="#" style="color:#fff">TEST</a></li>
                  <li><a href="#" style="color:#fff">TEST</a></li>
                </ul>
              </li>
  
  </ul>

＆＃13;

Answer 2

您可以让li项目display: inline-block使其成为水平。

如果您想控制每件商品的宽度，请使用width上的li。

如果要限制每行显示的项目数，可以通过max-width控制它以使行流向下一行。

调整margin上的li以便在项目之间留出一点空间。

＆＃13;

    <li  style="padding-left:10px;padding-top:10px" class="level1 nav-2-<?php echo $demmn; ?> first dropdown" >
                  <a href="#" style="color:#fff">
                      <span>TEST</span>
                  </a>
                <ul class="dropdown-menu" id="menu1" style="background:#000;">
                  <li><a href="#" style="color:#fff">TEST</a></li>
                  <li><a href="#" style="color:#fff">TEST</a></li>
                  <li><a href="#" style="color:#fff">TEST</a></li>
                  <li><a href="#" style="color:#fff">TEST</a></li>
                  <li><a href="#" style="color:#fff">TEST</a></li>
                  <li><a href="#" style="color:#fff">TEST</a></li>
                </ul>
              </li>

    <style>
    .dropdown-menu {
      max-width: 390px;
    }
    .dropdown-menu li {
      display: inline-block;
      margin: 0 20px 10px 0;
      width: 100px;
      min-height: 20px;
    }
   </style>

＆＃13;

Answer 3

你应该尝试使用flexbox，它可以让你用高效的包裹线创建行

＆＃13;

.dropdown-menu{
  display: flex;
  flex-direction: row; /*make a row*/
  align-items: center; /*vertical align centered*/
  justify-content: space-between; /*horizontal align*/
}

.dropdown-menu li{
  flex-wrap: wrap; /*allow wrap line*/
  width: 33%; /*if u wnt 3 object per line*/
}

＆＃13;

观看此网站以获得更高的精确度： flexbox guide

使用下拉菜单

3 个答案: