CSS: Causing line breaks for inline elements without <br />
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...
加载中,请稍侯......
精彩评论