Question

两个问题：第一：我怎样才能在“List”下面的两个名为“one”的项目中心？第二：我怎样才能在“一”和“两个”项目1-3的中心？

我尝试过各种各样的选择，但都没有。这就是我得到的：

jQuery(document).ready(function($) 
{
    $(".main ul").hide();
    $(".main").click(function() 
	{
        $(".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

您尝试实现的目标的描述有点模糊，但很快就会发生这种情况。

首先，您需要修改HTML以使其有效。只有li元素可能是ul的直接后代，因此需要包含子ul元素。此外，.one元素的CSS样式意味着它们并排显示，而不是相互显示。试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

标准格式设置会在解决HTML问题后自动执行此操作。

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

然后可以通过`text-align：center1完成居中

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

将子列表居中

2 个答案: