Question

如何让这些元素中的每一个都突破到新行，但是将它们保持为display = inline且没有 br 标记？

<div>
   <a href="element1">Element 1</a>
   <a href="element1">Element 2</a>
   <a href="element1">Element 3</a>
</div>

Answer 1

这可以完成，但不适用于所有浏览器。您需要将:after伪元素与white-space和content一起使用。像这样

<html>
<head>
<style type="text/css">
    div a:after {white-space: pre;content:'\A';}
</style>
</head>
<body>
<div>
   <a href="element1">Element 1</a>
   <a href="element1">Element 2</a>
   <a href="element1">Element 3</a>
</div>
</body>
</html>

参考：http://www.w3.org/TR/CSS2/generate.html#content

Answer 2

现在可以使用CSS网格可靠地实现

User.Read.All

Answer 3

您可以通过为父width和<div>定义相等的<a>来实现此目的。假设您将一个类'容器'应用于<div>

.container { width: 100px; }
a { width: 100px; display: inline; }

Answer 4

对于块元素不占据整行，将其宽度设置为小而且white-space:nowrap

label
{
    width:10px;
    display:block;
    white-space:nowrap;
}

Answer 5

<style type="text/css">
  div.probablyShouldPutAClassName a {
    display: block;
  }
</style>

Answer 6

将它们放在无序列表中？

我不确定我真的明白你在这之后会发生什么......

CSS：在没有<br/>的情况下导致内联元素的换行符

6 个答案: