你写它的方式是不可能的: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
.