开发者

CSS: Causing line breaks for inline elements without <br />

开发者 https://www.devze.com 2022-12-27 12:25 出处:网络
How can I have each of these a elements break on to new lines, but keeping them as display=inline and without br tags?

How can I have each of these a elements break on to new lines, but keeping them as display=inline and without br tags?

<div>
   <a href=开发者_Python百科"element1">Element 1</a>
   <a href="element1">Element 2</a>
   <a href="element1">Element 3</a>
</div>


This can be done, but will not work for all browsers. You need to use the :after pseudo-element with white-space and content. Like so

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

Reference: http://www.w3.org/TR/CSS2/generate.html#content


This can now be implemented reliably with css grid

div {
  display: grid;
  grid-template-columns: 100%;
}

div a {
  grid-column-start: 1;
}


you can do this by defining equal width for the parent <div> and the <a>. assuming you apply a class 'container' to the <div>

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


For the block element not occupy the whole line, set it's width to something small and the white-space:nowrap

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


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


Put them in an unordered list?

Not sure I really understand what you're after here...

0

精彩评论

暂无评论...
验证码 换一张
取 消