Блок отображения без 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;
}

Ответы

Ответ 1

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

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

Ответ 2

Используйте display: table.

Этот ответ должен содержать не менее 30 символов; Я ввел 20, так что еще несколько.

Ответ 3

Я бы сохранил каждую строку в своем собственном div, поэтому...

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

И затем для CSS:

.cell{display:inline-block}

Трудно дать вам решение, не видя исходного кода.

Ответ 4

Опять же: ответ, который может быть немного запоздалым (но для тех, кто все равно найдет эту страницу для ответа).

Вместо display:block; использовать display:inline-block;

Ответ 5

Не можете ли вы установить диапазон как display: block и установить width в содержащем элементе li?

Ответ 6

Попробуйте следующее:

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

Ответ 7

вы можете использовать:

width: max-content;

Примечание: поддержка ограничена, проверить здесь для полного разбиения поддерживающих браузеров