Блок дисплея без 100% ширини

Я хочу встановити, щоб елемент span відображався під іншим елементом за допомогою властивості display. Я спробував застосувати вбудований блок, але безуспішно, і зрозумів, що можу використовувати блок, якщо мені якось вдасться уникнути надання елементу ширини 100% (я не хочу, щоб елемент "розтягувався"). Чи можна це зробити, або якщо ні, яка хороша практика для вирішення такого роду питань?

Приклад: список новин, де я хочу встановити посилання "читати далі" в кінці кожного допису (примітка: <a>замість <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

Оновлення: вирішено. У CSS застосовуйте

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

Якщо я правильно розумію ваше запитання, наступний CSS буде розміщувати ваш a під прольотами і не дозволить йому мати 100% ширину:

a {
    display: block; 
    float: left; 
    clear: left; 
}

Використовуйте display: table.

Ця відповідь повинна складати щонайменше 30 символів; Я ввів 20, тож ось ще кілька.

Ви можете використовувати:

width: max-content;

Примітка: підтримка обмежена, перевірте тут, щоб отримати повну інформацію про підтримувані браузери

Я б зберігав кожен рядок у своєму div, тому ...

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

А потім для CSS:

.cell{display:inline-block}

Важко дати вам рішення, не побачивши оригінальний код.

Знову ж таки: відповідь, яка може бути трохи пізньою (але для тих, хто знайде цю сторінку для відповіді в будь-якому випадку).

Замість display:block;використанняdisplay:inline-block;

Спробуйте це:

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

У мене була ця проблема, я вирішив її так:

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

.child {
  display: block;
}

"white-space: nowrap" гарантує, що діти дитини (якщо вони є) не переносяться на новий рядок, якщо місця недостатньо.

без "пробілу: nowrap":

з "пробілом: nowrap":

редагувати: здається, це також просто працює без частини дочірнього блоку для мене, тому, здається, це добре працює.

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

Ви можете використовувати наступне:

display: inline-block;

Добре працює над посиланнями та іншими елементами.