CSS如何让指定的某个Tag不显示(比如:display=none),但是还是占有位置呢?

参考使用:antd的Tag
image.png

我做了2行的Tag:

<Row>
      <Tag bordered={false}>Tag 1</Tag>
      <Tag bordered={false}>Tag 2</Tag>
      <Tag bordered={false} closable>
        Tag 3
      </Tag>
      <Tag bordered={false} closable>
        Tag 4
      </Tag>
</Row>

<Row>
      <Tag bordered={false}>Tag 1</Tag>
      <Tag bordered={false}>Tag 2</Tag>
      <Tag bordered={false} closable>
        Tag 3
      </Tag>
      <Tag bordered={false} closable>
        Tag 4
      </Tag>
</Row>

现在的需求是,如何让指定的某个Tag不显示(比如:display=none),但是还是占有位置呢?

阅读 731
3 个回答
✓ 已被采纳

简单方式:CSS使用此方式就好:

visibility: 'hidden'

transform: scale(0)
opacity: 0
z-index: -1
visibility: hidden

选择合适的隐藏方式
要是你既不想让元素显示,也不想让它占据空间,就可以使用 display: none。
如果需要保留元素的布局空间,只是让元素不可见,那么 visibility: hidden 是不错的选择。
当你希望元素不可见,但还能响应鼠标事件时,opacity: 0 比较合适。
对于无障碍需求(例如为屏幕阅读器保留内容),可采用 position 结合负值偏移的方法
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题