Menu
I want to set a span element to appear below another element using the display property. I tried applying inline-block but without success, and figured I could use block if I somehow managed to avoid giving the element a width of 100% (I don't want the element to "stretch out"). Can this be done, or if not, what's good praxis for solving this kind of issue?
Example: a news list where I want to set a "read more" link at the end of each post (note: <a> instead of <span>)
<li> <span class="date">11/15/2012</span> <span class="title">Lorem ipsum dolor</span> <a class="read-more">Read more</a> </li>
Update: Solved. In CSS, apply
li { clear: both; } li a { display: block; float: left; clear: both; } 
409
If you have a border or padding set for your divs, then you've created additional pixels that will prevent your divs from adding up to a 100% width. To fix this, make sure you've added box-sizing: border-box to the div's styles.
Inline elements are built for text and thus they should flow inline with the text, and only be as wide as the text they contain. Thus, you can't set the width of an inline element. Block elements are made to fill all the available width by default and are thus on their own line rather than flowing inline.
Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not. Compared to display: block , the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
Block: Displays an element as a block element. It starts on a new line and takes up take up as much horizontal space as they can. Block-level elements do not appear in the same line, but breaks the existing line and appear in the next line. Flex: Flex displays an element as a flexible structure.
Use display: table.
This answer must be at least 30 characters; I entered 20, so here's a few more.
167
If I'm understanding your question properly, the following CSS will float your a below the spans and keep it from having a 100% width:
a { display: block; float: left; clear: left; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
