Display block without 100% width

Question

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

Answer 1

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.

Answer 2

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

with "white-space: nowrap" :

---

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

Answer 3

you can use:

width: max-content;

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

Answer 4

Try this:

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

Answer 5

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

Answer 6

You can use the following:

display: inline-block;

Works well on links and other elements.