发表新帖
发表新帖

how to hide
  • bullets in navigation menu and footer links BUT show them for listing items

    • 前端 未结
    关注
    7 1867
    后悔当初
    后悔当初 2020-12-09 07:23

    I have a navigation menu, footer, and a slideshow which use listed style to list links and images. I have the css list-style:none; set to hide the bullets next

    相关标签:
    7条回答
    • 夕颜
      2020-12-09 08:08

      when bullet have to hide then use:

      li { list-style: none;}

      when bullet have to list show, then use:

      li { list-style: initial;}

      0 讨论(0)
    • 忘了有多久
      2020-12-09 08:11

      You need to define a class for the bullets you want to hide. For examples

      .no-bullets {
    list-style-type: none;
}

      Then apply it to the list you want hidden bullets:

      <ul class="no-bullets">

      All other lists (without a specific class) will show the bulltets as usual.

      0 讨论(0)
    • 天涯浪人
      2020-12-09 08:18

      The example bellow explains how to remove bullets using a css style class. You can use , similar to css class, by identifier (#id), by parent tag, etc. The same way you can use to define a css to remove bullets from the page footer.

      I've used this site as a starting point.

      <html>
<head>
<style type="text/css">
div.ui-menu li {
    list-style:none;
    background-image:none;
    background-repeat:none;
    background-position:0; 
}
ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}
li
{
    background-image:url(sqpurple.gif);
    background-repeat:no-repeat;
    background-position:0px 5px; 
    padding-left:14px;
}
</style>
</head>

<body>

<div class="ui-menu">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>
      0 讨论(0)
    • 时光取名叫无心
      2020-12-09 08:20

      I combined some of Flavio's answer to this small solution.

      .hidden-ul-bullets li {
    list-style: none;
}
.hidden-ul-bullets ul {
    margin-left: 0.25em; // for my purpose, a little indentation is wished
}

      The decision about bullets is made at an enclosing element, typically a div. The drawback (or todo) of my solution is that the liststyle removal also applies to ordered lists.

      0 讨论(0)
    • 野趣味
      2020-12-09 08:25

      Let's say you're using this HTML5 layout:

      <html>
    <body>
        <header>
            <nav><ul>...</ul></nav>
        </header>
        <article>
            <ul>...</ul>
        </article>
        <footer>
            <ul>...</ul>
        </footer>
    </body>
</html>

      You could say in your CSS:

      header ul, footer ul, nav ul { list-style-type: none; }

      If you're using HTML 4, assign IDs to your DIVs (instead of using the new fancy-pants elements) and change this to:

      #header ul, #footer ul, #nav ul { list-style-type: none; }

      If you're using a CSS reset stylesheet (like Eric Meyer's), you would actually have to give the list style back, since the reset removes the list style from all lists.

      #content ul { list-style-type: disc; margin-left: 1.5em; }
      0 讨论(0)
    • 一个人的身影
      2020-12-09 08:26

      You can style li elements differently based on their class, their id or their ancestor elements:

      li { /* styles all li elements*/
    list-style-type: none;
}

#ParentListID li { /* styles the li elements that have an ancestor element
                      of id="ParentListID" */
    list-style-type: bullet;
}

li.className { /* styles li elements of class="className" */
    list-style-type: bullet;
}

      Or, to use the ancestor elements:

      #navigationContainerID li { /* specifically styles the li elements with an ancestor of
                               id="navigationContainerID" */
    list-style-type: none;
}

li { /* then styles all other li elements that don't have that ancestor element */
    list-style-type: bullet;
}
      0 讨论(0)
     看不清?
    提交回复
    热议问题