Responsive design 隐藏<；i>；手机版

我有下面的代码，似乎不知道如何仅在移动模式下隐藏“I”元素之间的斜体潜台词。基本上，我只想在手机上显示“家”`

<div class="nav-container">   
       <nav>         
        <ul class="nav" id="nav">
         <li><a href="#home" class="nav-active"> <span>Home</span><i>Welcome to</br> our site</i></a></li>
          <li> <a href="#about"><span>About</span><i>What We</br>Do</i></a> </li> etc..

等等。。

---

i{visibility:hidden；}一直工作，但我只在移动时需要它。有什么想法吗？

您可以使用媒体查询：

@media only screen and (max-width: 767px) {
    i { display: none; }
}

这将在任何小于768像素宽的屏幕上隐藏

元素

---

请注意，

display:none

基本上会将其从页面流中删除，而

visibility:hidden

只是使其不可见，但它仍然是页面流的一部分。

出于某种原因，“display:none”不起作用，但“visibility:hidden”至少会将其隐藏。从显示的页面流方面来看，您是对的：如果它起作用，没有比这更好的了。不知道为什么不是，这很奇怪。是否有更高特异性的css规则？类似于

body i{display:inline}

或类似的东西？是的，实际上我相信

{display:inline table；

可能会产生干扰，但由于格式问题无法更改。是的，这更具体。您是说由于布局问题，您不能用更具体的规则覆盖它吗？您可以始终对

进行例外。post tags i

并将

display:none

放在所有其他

元素上-例如。在上面的媒体查询中，由于布局问题，请尝试

html正文i{display:none；}

和

html正文。post标记i{display:inline table；可见性：hidden；}

是。我将尝试您的建议并让您知道。