Центр подсписок

Question

Две проблемы: Во-первых: Как я могу центрировать прямо под «списком» обоих предметов, названных как «один»? Во-вторых: Как я могу сосредоточиться прямо под «одним» и «двумя» элементами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. Кроме того, стилизация CSS элементов .one означала, что они отображались бок о бок, а не под ними. Попробуйте это:

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, были решены.

Ваша структура HTML выглядит немного странно ... вы закрываете li перед открытием подменю ul.

Центрирование может быть достигнуто с помощью `выравнивания текста: Center1

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>