'Display block without 100% width

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;
}
htmlwidthblockcss


Solution 1:[1]

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

Solution 2:[2]

Use display: table.

This answer must be at least 30 characters; I entered 20, so here's a few more.

Solution 3:[3]

you can use:

width: max-content;

Note: support is limited, check here for a full breakdown of supporting browsers

Solution 4:[4]

I would keep each row to its own div, so...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

And then for the CSS:

.cell{display:inline-block}

It's hard to give you a solution without seeing your original code.

Solution 5:[5]

Again: an answer that might be a little bit too late (but for those who find this page for the answer anyways).

Instead of display:block; use display:inline-block;

Solution 6:[6]

Try this:

li a {
    width: 0px;
    white-space:nowrap;
}

Solution 7:[7]

I had this issue, I solved it like so:

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

the "white-space: nowrap" makes sure that the children of the child(if it has any) don't wrap to new line if there is not enough space.

without "white-space: nowrap" :

enter image description here

with "white-space: nowrap" :

enter image description here

edit: it seems that it also just works without the child block part for me, so just this seems to work fine.

.parent {
  white-space: nowrap;
  display: table;
}

Solution 8:[8]

You can use the following:

display: inline-block;

Works well on links and other elements.

Solution 9:[9]

i use this:

vertical-align: top; //do the trick

a {
display: inline-block;
vertical-align: top;
padding: 10px 30px;
border-radius: 5px;
background-color: #372a20;
border: 1px solid var(--blanco); 
color: var(--blanco);
margin: 0 auto -25px;
text-decoration: none;

}

Related Questions