中心子列表

Question

两个问题： 第一：我怎样才能在“列表”中居中两个项目命名为类“一”？ 第二：如何在“One”和“Two”项目1-3之下居中？

我试过各种选择，没有工作。这是我得到了什么：

jQuery(document).ready(function($) 
 
{ 
 
    $(".main ul").hide(); 
 
    $(".main").click(function() 
 
\t { 
 
     $(".main ul").slideToggle(200); 
 
    }); 
 
});

.main, .one, .two 
 
{ 
 
    list-style-type: none; 
 
} 
 
.main 
 
{ 
 
    cursor: pointer; 
 
    display: inline-block; 
 
} 
 

 
.one, .two 
 
{ 
 
    cursor: default; 
 
    display: inline-block; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<li class="main"><h3>List</h3> 
 
          <ul> 
 
           <li class="one">One</li> 
 
            <ul> 
 
             <li class="two">Item 1</li> 
 
             <li class="two">Item 2</li> 
 
             <li class="two">Item 3</li> 
 
            </ul> 
 
           <li class="one">Two</li> 
 
            <ul> 
 
             <li class="two">Item 1</li> 
 
             <li class="two">Item 2</li> 
 
             <li class="two">Item 3</li> 
 
            </ul> 
 
    </ul> 
 
</li>

Answer 1

的你想达到什么样的描述是有点模糊，但hopfully这是一些接近。

首先，您需要修改您的HTML以使其有效。只有li元素可能是ul的直系后代，所以需要包含子元素ul。此外，.one元素的CSS样式意味着它们并排显示，而不是彼此之下。试试这个：一旦HTML的问题已得到解决

jQuery(document).ready(function($) { 
 
    $(".main ul").hide(); 
 
    $(".main").click(function() { 
 
    $(".main ul").slideToggle(200); 
 
    }); 
 
});

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.main { 
 
    cursor: pointer; 
 
} 
 
.two { 
 
    cursor: default; 
 
    padding: 0; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<ul> 
 
    <li class="main"> 
 
    <h3>List</h3> 
 
    <ul> 
 
     <li class="one">One 
 
     <ul> 
 
      <li class="two">Item 1</li> 
 
      <li class="two">Item 2</li> 
 
      <li class="two">Item 3</li> 
 
     </ul> 
 
     </li> 
 
     <li class="one">Two 
 
     <ul> 
 
      <li class="two">Item 1</li> 
 
      <li class="two">Item 2</li> 
 
      <li class="two">Item 3</li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

标准格式会自动执行此操作。

您的HTML结构看起来有点奇怪...您在打开子菜单ul之前关闭li。

定心然后可以通过`文本对齐来完成：中心1

jQuery(document).ready(function($) { 
 
    $(".main ul").hide(); 
 
    $(".main").click(function() { 
 
    $(".main ul").slideToggle(200); 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul { 
 
    text-align: center; 
 
} 
 
li { 
 
    list-style-type: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="main"> 
 
    <h3>List</h3> 
 

 
    <ul> 
 
     <li class="one">One 
 
     <ul> 
 
      <li class="two">Item 1</li> 
 
      <li class="two">Item 2</li> 
 
      <li class="two">Item 3</li> 
 
     </ul> 
 
     </li> 
 
     <li class="one">Two 
 
     <ul> 
 
      <li class="two">Item 1</li> 
 
      <li class="two">Item 2</li> 
 
      <li class="two">Item 3</li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>