删除 li 文本,同时保留列表样式
我有一个使用缩进点的列表样式的无序列表。我想保留这些点,但从视图中删除文本。我最初猜测我可以简单地设置 text-indent:-999px;
但这也会删除点。
有什么建议吗?
我知道如果将 li
内的文本设置为  
就会起作用,但这感觉就像作弊。
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
.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
如何在列表项内使用带有 display:block 的跨度,并在跨度上设置文本缩进?
How about using a span inside the list item with display:block, and setting text-indent on the span?
这可以帮助你
this can help you
您需要做的就是保留一个空白
,这将显示没有任何文本的点
All you need to do is leave a blank
<li></li>
and that will display the dots without any text我们需要知道您为什么想要这个...上下文...
您希望稍后发生一些事情以使文本可见吗?如果是这样,您应该将
中的所有文本放入
中,即
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 isvisibility: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?"..
如果您确实不想将文本设置为
那么您可以使用 wrapInner 如下:
试试这个:
If you really don't want to set the text to a
then you could use wrapInner as follows:
Try this: