0

我正在编写一个使用媒体查询来处理移动版本的网站。是否有可能让主css文件输出这个

<div class="classname">
  Item 1<br />
  Item 2<br />
  Item 3<br />
  etc
</div>

然后在手机的 css 文件中输出这个：

<div class="classname">
  Item 1&nbsp;&nbsp;
  Item 2&nbsp;&nbsp;
  Item 3&nbsp;&nbsp;
  etc
</div>

是否可以使用媒体查询隐藏文本？

4

3 回答 3

5

不完全是，不。但是你可以有一个ulwith lis 是display: block（对于前一个例子）或display: inline（对于后者）。

<ul class="classname">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
 </ul>

 case 1:
 ul.classname li { display: block }

 case 2:
 ul.classname li { display: inline; padding-right: 24px }
于 2011-03-21T21:37:58.230 回答
1

你写它的方式是不可能的：CSS 不会重写你的 HTML，它只是改变文档的表现方面。最好的方法是编写“语义”HTML，即包含文档结构但不包含布局的 HTML，然后使用 CSS 定义布局方式。

在您的示例中，您可能希望div包含项目列表，因此合乎逻辑的做法是使用 a<ul>而不是<div>，而<li>不是单个文本项目，例如：

<ul class="classname">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

有了这样的标记，您可以使用 CSS 来设置列表样式。对于桌面浏览器，您可能希望垂直显示项目：

ul.classname {
    /* First, override browser defaults: */
    list-style: none;
    padding: 0;
    margin: 0;
    text-indent: 0;
}

ul.li {
    display: block;
    padding: 0;
    margin: 0;
    text-indent: 0;
}

对于移动浏览器，您可能希望它们彼此相邻，并在它们之间添加一点间距：

ul.li {
    display: inline;
    margin-right: 2em;
}

要完全隐藏元素，请使用标准 CSS 技术，即display: none.

于 2011-03-21T21:43:24.367 回答
1

您可以简单地br {display:none}在您的 iphone 样式表中进行设置，也可以使用添加信息，::after但我不确定您是否可以在语句的content一部分中放置不间断的空格。::after

除此之外，如果你隐藏br标签，你就没有钩子可以添加一些东西。

我建议先使用语义非 br html，这会使一切变得容易得多。

于 2011-03-21T21:38:22.913 回答