Question

我的代码：

p{
 display: none;
 position: relative;
 }
 
p i{
   width:25px;
   height:25px;
   border-radius: 50%;
   position: absolute; 
   top: 0;
   cursor: pointer;
   left: 0;
   background: pink;
   display:inline-block!important;
  }

<p> <i></i> I must be disappeared </p>

是否可以在display:none块中显示一个项目

还有其他方法可以显示 <i> 仅可见但不带标签的文本“我必须消失”吗？

PS：我不想为“我必须消失”文本添加任何其他标签。

Answer 1

让我们不要忘记visibility属性

不要使用display:none;而是使用visibility:hidden;

尝试一下

p{
 visibility: hidden;
 position:relative;
 }
 
p i{
   background: pink;
   display: inline-block;
   cursor: pointer;
   height: 20px;
   width: 20px;  
   position: absolute;
   border-radius:50%;
   top: 0;
   left: 0;
   visibility: visible !important;
  }

<p> <i></i> I must be disappeared </p>

另一种方法

使用text-indent属性隐藏文本

除非它为正数，否则它不会产生任何滚动条。

 p{
     text-indent: -9999px;
     position:relative;
     }
     
    p i{
       background: pink;
       display: inline-block;
       cursor: pointer;
       height: 20px;
       width: 20px;  
       position: absolute;
       border-radius:50%;
       top: 0;
       left: 0;
      }

<p> <i></i> I must be disappeared </p>

在显示器中显示某些元素：无块

1 个答案: