Question

以下是我的列表： -

<div class="box">
  <div class="box-heading">Menu</div>
  <div class="box-content">
    <ul>
            <li><a href="#">My Account</a></li>
            <li><a href="#">Edit Account</a></li>
            <li><a href="#">Password</a></li>
            <li><a href="#">Contact Admin</a></li> <!--display none-->
            <li><a href="#">Address Books</a></li><!--display none-->
            <li><a href="#">Emails &amp; Notifications</a></li><!--display none-->
            <li><a href="#">Order Now</a></li>
            <li><a href="#">Order History</a></li><!--display none-->
            <li><a href="#">Pending Orders</a></li>
            <li><a href="#">Current Orders</a></li>
            <li><a href="#">Completed Orders</a></li>

            <li><a href="#">Downloads</a></li>//display none
            <li><a href="#">Newsletter</a></li>//display none
            <li><a href="#">Logout</a></li>
          </ul>
  </div>
</div>

我不想显示以下列表： -

联系管理员

地址簿
电子邮件＆amp;通知
订单历史
下载
月刊

使用css如何将上面的列表显示为无

提前谢谢。

Answer 1

最灵活的解决方案是在要隐藏的列表项中添加一个类，例如：

<li><a href="#">My Account</a></li>
<li><a href="#">Edit Account</a></li>
<li><a href="#">Password</a></li>
<li class="foo"><a href="#">Contact Admin</a></li> <!--display none-->
<li class="foo"><a href="#">Address Books</a></li><!--display none-->
<li class="foo"><a href="#">Emails &amp; Notifications</a></li><!--display none-->
<li><a href="#">Order Now</a></li>
<li class="foo"><a href="#">Order History</a></li><!--display none-->
<li><a href="#">Pending Orders</a></li>

然后

.foo {
    display: none;
}

Live Example

但如果你不能这样做，你几乎别无选择，只能使用:nth-child（计数从1开始，与大多数编程内容不同）：

ul li:nth-child(4),
ul li:nth-child(5),
ul li:nth-child(6),
ul li:nth-child(8) {
    display: none;
}

Live Example

当然，这会隐藏每个列表中的列表项，因此您需要更具体地将其锁定。

这样做的问题当然是，如果稍后修改列表，则必须更改这些索引。很脆弱。使用类更健壮。

Answer 2

CSS：

.hidden
{
    display:none;
}

HTML：

<li class="hidden"><a href="#">Contact Admin</a></li> <!--display none-->
<li class="hidden"><a href="#">Address Books</a></li><!--display none-->
<li class="hidden"><a href="#">Emails &amp; Notifications</a></li><!--display none-->
<li><a href="#">Order Now</a></li>
<li class="hidden"><a href="#">Order History</a></li><!--display none-->

Answer 3

如果你想使用内联css，你应该为你的ul元素添加一个样式：

<li style="display:none;">

否则你使用一个类并设置属性display：none;

<style>
.hide{
  display:none;
}
</style>

<li class="hide">

li标签应该从多个li列表标签中显示无

3 个答案: