Question

目前在我的style.css文件中，我仅将某些设计用于我的网站的移动版本。

这是开始标记：

@media only screen and (min-width : 150px) and (max-width : 780px)

我希望能够对其进行设置，以便当该网站位于移动设备上时，它不会使用下面显示的＆amp; nbsp，我只想在完整桌面中使用&nbsp。有没有办法在css文件中处理这个？

<td colspan="2" style="font-size: 16pt;">
 <a href="index.php">Home</a> &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; 
 <a href="product_list.php">All Products</a>
</td>

Answer 1

如果你想使用CSS。然后在桌面网站上，你必须编写HTML

<td colspan="2" style="font-size: 16pt;">
 <a href="index.php">Home</a>
 <a href="product_list.php" style="margin-left: 10px;">All Products</a>
</td>

无法使用CSS动态删除

 。 JavaScript可以处理这些事件，但CSS并不是为处理这个事件而设计的。

这样您就可以使用CSS控制元素之间的空间。现在，在媒体样式中，您可以删除此边距。

@media only screen and (min-width : 150px) and (max-width : 780px) {
   td a:nth-child(2) {
      /* second a */
      margin-left: 0;
   }
}

Answer 2

我认为有两种可能的解决方案：

使用边距而不是 ，因为不间断的空间受到保护，无法通过CSS删除。您可以将margin:0 3%;或类似内容应用于锚点。
用 换算<span class="spacer">   </span> s并在移动设备上应用display:none。

如何摆脱移动版本的空间

2 个答案: