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 回答