如何在使用多選單的情況下將元素包裝到下一行的情況下使li元素居中對齊？-有解無憂

我做了一個簡單的多選單，其中的專案可以通過滑鼠點擊打開，但是我有一個問題，我有困難的解決方案。如何使 li 元素在案例中居中對齊并在帶有多選單的案例中將元素包裝到下一行？我做了一個簡單的多選單，其中的專案可以通過滑鼠單擊打開，但我對解決方案有疑問其中我有困難。如何在使用多選單的情況下將元素包裝到下一行的情況下使 li 元素居中對齊？

$(document).ready(function(e) {
        $('.parent').on('click', function(e) {
                $r=$(this).find('ul').attr("id");
                $check=$("#"  $r).css('display');

                $("#"  $r).css( {
                        'display': 'block',
                        'position': 'absolute',
                        'z-index': '9999'
                    }
                    
                );

                if ($check=="block") {
                    $("#"  $r).css( {
                            'display': 'none'
                        }
                        
                    );
                }
                
                if ($(this).parent().attr('id')=="menu") {
                    $("li.parent > ul").not("#"  $(this).find("ul").attr("id")).css( {
                            'display': 'none'
                        }
                        
                    );
                }
                
                return false;
            }
            
        );
    }
    
);

.parent {
    display: block;
    position: relative;
    float: left;
    line-height: 30px;
    background-color: black;
    border-right: #CCC 1px solid;
}

.parent a {
    margin: 10px;
    color: #FFFFFF;
    text-decoration: none;
}

.child {
    display: none;
}

.child li {
    background-color: #E4EFF7;
    line-height: 30px;
    border-bottom: #CCC 1px solid;
    border-right: #CCC 1px solid;
    width: 100%;
    background-color: black;
}

.child li a {
    color: #FFF;
    color: red;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0px;
    min-width: 10em;
}
/*
ul ul ul {
    left: 100%;
    top: 0;
    margin-left: 1px;
}
*/
li:hover {
    background-color: red;
}

.parent li:hover {
    background-color: #F0F0F0;
}

.expand {
    font-size: 12px;
    float: right;
    margin-right: 5px;
    color: red;
}

nav {
    margin: 0 auto;
    display: table;
    text-align: center;
}

nav ul {
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<nav style="text-align: center;">
   <ul id="menu" style="text-align:center !important">
      <li class="parent" id="a1">
         <a href="#">CAT 1</a>
         <ul class="child" id="cat1_1">
            <li class="parent" id="a2">
               <a href="#">SUB CAT1 <span class="expand">   
&#9660;</span></a>
               <ul class="child" id="cat1_2">
                  <li><a href="#">1</a></li>
                  <li class="parent" id="a3">
                     <a href="#">SUB CAT1_2<span class="expand">    
&#9660;</span></a>
                     <ul class="child" id="cat1_3">  
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                     </ul>
                  <li><a href="#">5</a></li>
               </ul>
            </li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
         </ul>
      </li>
      <li class="parent" id="b1">
         <a href="#">CAT 2</a>
         <ul class="child" id="cat2_1">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li class="parent" id="b2">
               <a href="#">SUB CAT 2<span class="expand"> 
               
                
&#9660;</span></a>
  <ul class="child" id="cat2_2">  
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                     </ul>
               <ul class="child">
                  <li><a href="#" nowrap>4</a></li>
                  <li><a href="#" nowrap>5</a></li>
               </ul>
            </li>
            <li><a href="#">6</a></li>
         </ul>
      </li>
      <li class="parent" id="c1"><a href="#">CAT 3</a>
      <li class="parent" id="e1"><a href="#">CAT 4</a>
      <li class="parent" id="f1"><a href="#">CAT 5</a>
      <li class="parent" id="g1"><a href="#">CAT 6</a>
      <li class="parent" id="i1">
         <a href="#">CAT 7</a>
         <ul class="child" id="cat7_1">
            <li><a href="#">1</a></li>
            <li class="parent" id="j1">
               <a href="#">SUB CAT 7 <span class="expand">  
&#9660;</span></a>
               <ul class="child" id="cat7_2">
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
               </ul>
            </li>
            <li><a href="#">6</a>
            </li>
            <li><a href="#">7</a></li>
         </ul>
      </li>
   </ul>
</nav>

uj5u.com熱心網友回復：

您可以使用flex它并洗掉float樣式。

nav ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

$(document).ready(function(e) {
        $('.parent').on('click', function(e) {
                $r=$(this).find('ul').attr("id");
                $check=$("#"  $r).css('display');

                $("#"  $r).css( {
                        'display': 'block',
                        'position': 'absolute',
                        'z-index': '9999'
                    }
                    
                );

                if ($check=="block") {
                    $("#"  $r).css( {
                            'display': 'none'
                        }
                        
                    );
                }
                
                if ($(this).parent().attr('id')=="menu") {
                    $("li.parent > ul").not("#"  $(this).find("ul").attr("id")).css( {
                            'display': 'none'
                        }
                        
                    );
                }
                
                return false;
            }
            
        );
    }
    
);

.parent {
    position: relative;
    line-height: 30px;
    background-color: black;
    border-right: #CCC 1px solid;
}

.parent a {
    margin: 10px;
    color: #FFFFFF;
    text-decoration: none;
}

.child {
    display: none;
}

.child li {
    background-color: #E4EFF7;
    line-height: 30px;
    border-bottom: #CCC 1px solid;
    border-right: #CCC 1px solid;
    width: 100%;
    background-color: black;
}

.child li a {
    color: #FFF;
    color: red;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0px;
    min-width: 10em;
}
/*
ul ul ul {
    left: 100%;
    top: 0;
    margin-left: 1px;
}
*/
li:hover {
    background-color: red;
}

.parent li:hover {
    background-color: #F0F0F0;
}

.expand {
    font-size: 12px;
    float: right;
    margin-right: 5px;
    color: red;
}

nav {
    margin: 0 auto;
}

nav ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<nav style="text-align: center;">
   <ul id="menu" style="text-align:center !important">
      <li class="parent" id="a1">
         <a href="#">CAT 1</a>
         <ul class="child" id="cat1_1">
            <li class="parent" id="a2">
               <a href="#">SUB CAT1 <span class="expand">   
&#9660;</span></a>
               <ul class="child" id="cat1_2">
                  <li><a href="#">1</a></li>
                  <li class="parent" id="a3">
                     <a href="#">SUB CAT1_2<span class="expand">    
&#9660;</span></a>
                     <ul class="child" id="cat1_3">  
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                     </ul>
                  <li><a href="#">5</a></li>
               </ul>
            </li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
         </ul>
      </li>
      <li class="parent" id="b1">
         <a href="#">CAT 2</a>
         <ul class="child" id="cat2_1">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li class="parent" id="b2">
               <a href="#">SUB CAT 2<span class="expand"> 
               
                
&#9660;</span></a>
  <ul class="child" id="cat2_2">  
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                     </ul>
               <ul class="child">
                  <li><a href="#" nowrap>4</a></li>
                  <li><a href="#" nowrap>5</a></li>
               </ul>
            </li>
            <li><a href="#">6</a></li>
         </ul>
      </li>
      <li class="parent" id="c1"><a href="#">CAT 3</a>
      <li class="parent" id="e1"><a href="#">CAT 4</a>
      <li class="parent" id="f1"><a href="#">CAT 5</a>
      <li class="parent" id="g1"><a href="#">CAT 6</a>
      <li class="parent" id="i1">
         <a href="#">CAT 7</a>
         <ul class="child" id="cat7_1">
            <li><a href="#">1</a></li>
            <li class="parent" id="j1">
               <a href="#">SUB CAT 7 <span class="expand">  
&#9660;</span></a>
               <ul class="child" id="cat7_2">
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
               </ul>
            </li>
            <li><a href="#">6</a>
            </li>
            <li><a href="#">7</a></li>
         </ul>
      </li>
   </ul>
</nav>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/425590.html

標籤：jQuery css 文本对齐文本对齐

上一篇：在Nginx反向代理后面運行Apache（使用.htaccess）應用程式

下一篇：如何將按鈕塊移動到正確的css