Question

我有这个HTML 无法编辑：

<div id="menu">
 <a href="">Home</a> &nbsp;|&nbsp;
 <a href="">Meet Our Physicians</a> &nbsp;|&nbsp;
 <a href="">Services</a> &nbsp;|&nbsp;
</div>

我必须让它具有响应性，当我在移动设备上时，我想要删除 | 

我该如何定位？类似的东西：

@media screen and (max-width:480px){
element{
display:none;
}
}

Answer 1

试试这个：

@media screen and (max-width:480px) {
    #menu > a{
        margin-right: -10px; /* getting the elements closer */
    }
    #menu {
        color: transparent;  /* making the open text's color transparent */
    }
}

<强> Working Fiddle

Answer 2

模仿这一点的唯一方法（CSS无法定位不属于元素的文本），就是定位包含元素，然后覆盖后代<a>元素中的样式：

@media screen and (max-width:480px){
    #menu {
        font-size: 0;
    }
    #menu a {
        font-size: 16px; /* or whatever */
        margin: 0 0.5em; /* or whatever, to restore some spacing between elements */
    }
}

Answer 3

编辑：也许是这样的：

@media screen and (max-width:480px){
    #menu {
       text-indent: -9999px;
       font-size: 0px;
    }
    #menu a {
       text-indent: 0px;
       font-size: 14px;
    }
}

如何通过CSS定位内容

3 个答案: