删除 li 文本,同时保留列表样式

发布于 2024-11-26 20:16:51 字数 695 浏览 1 评论 0原文

我有一个使用缩进点的列表样式的无序列表。我想保留这些点,但从视图中删除文本。我最初猜测我可以简单地设置 text-indent:-999px; 但这也会删除点。

有什么建议吗?

我知道如果将 li 内的文本设置为 &nbsp 就会起作用,但这感觉就像作弊。

HTMLCSS

<div id="page_nav">
  <ul>
    <li class="showlink" id="show_one">PAGE ONE</li>
    <li class="showlink" id="show_two">PAGE TWO</li>
    <li class="showlink" id="show_three">PAGE THREE</li>
  </ul>
</div>

#page_nav ul{
    margin:0;
    display:block;
}
#page_nav li{
    width:15px;
    height:15px;
    margin:0 0 0 5px;
    float:left;
    font-size:3.5em;
}

I've got an unordered list with a list style using indented dots. I'd like to maintain those dots but remove the text from view. I originally guessed that I could simply set text-indent:-999px; but that removes the dot as well.

Any recommendations?

I know that it will work if the text inside the li is set to  , but that feels like cheating.

HTML

<div id="page_nav">
  <ul>
    <li class="showlink" id="show_one">PAGE ONE</li>
    <li class="showlink" id="show_two">PAGE TWO</li>
    <li class="showlink" id="show_three">PAGE THREE</li>
  </ul>
</div>

CSS

#page_nav ul{
    margin:0;
    display:block;
}
#page_nav li{
    width:15px;
    height:15px;
    margin:0 0 0 5px;
    float:left;
    font-size:3.5em;
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

泅渡 2024-12-03 20:16:51

  • Item
  • .list_item { display: none; 问题

    关于为什么隐藏文本的一些上下文将有助于回答

    <li><span class="list_item">Item</span></li>

    .list_item { display: none; }

    some context as to why you are hiding the text would help answer the question

    橘虞初梦 2024-12-03 20:16:51

    如何在列表项内使用带有 display:block 的跨度,并在跨度上设置文本缩进?

    How about using a span inside the list item with display:block, and setting text-indent on the span?

    把梦留给海 2024-12-03 20:16:51
    $('li.your_style').each(function()
    {
      $(this).html($(this).html().toString().replace(/([^\.]+)/g,''));
    });
    

    这可以帮助你

    $('li.your_style').each(function()
    {
      $(this).html($(this).html().toString().replace(/([^\.]+)/g,''));
    });
    

    this can help you

    哆啦不做梦 2024-12-03 20:16:51

    您需要做的就是保留一个空白

  • ,这将显示没有任何文本的点

    All you need to do is leave a blank <li></li> and that will display the dots without any text

    浪漫人生路 2024-12-03 20:16:51

    我们需要知道您为什么想要这个...上下文...

    您希望稍后发生一些事情以使文本可见吗?如果是这样,您应该将

  • 中的所有文本放入 中,即 visibility:hidden 然后根据需要要显示/阅读它,您应该使其可见。
  • 如果您想保留点但丢失文本...您希望屏幕阅读器说什么? “点?”..

    We need to know why you want this... the context...

    Wo you want something to happen later that makes the text visibile? If so, you should put all the text within the <li> in a <span> that is visibility:hidden then upon wanting it to be displayed/read you should make it visible..

    If you want to maintain the dot but lose the text... what would you want the screen reader to say? "dot?"..

    合久必婚 2024-12-03 20:16:51

    如果您确实不想将文本设置为   那么您可以使用 wrapInner 如下:

    试试这个:

        $(function(){
            $("li.showlink").wrapInner("<span style='display:none'></span>");
        });
    

    If you really don't want to set the text to a   then you could use wrapInner as follows:

    Try this:

        $(function(){
            $("li.showlink").wrapInner("<span style='display:none'></span>");
        });
    
    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文