Блок отображения без ширины 100%

98

Я хочу, чтобы элемент 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
У вас есть разметка (HTML или CSS), чтобы показать нам? Трудно работать над проблемой, не над чем реально поработать. Также была бы хороша демонстрация на jsfiddle .
Tom Oakley
Думал, что мне не нужен образец кода, так как он просто позиционирует элемент span. См. Обновленный пост.
Стаффан Эстберг
Вы можете серьезно сократить всю эту разметку, используя всего одну строку кода, как я упоминал ниже.
ha404

Ответы:

75

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

a {
    display: block; 
    float: left; 
    clear: left; 
}
Пи Джей МакКормик
источник
Я попытался применить это, но поскольку элементы диапазона (заголовок и дата в примере) не имеют плавающего положения, ссылка размещается перед последним диапазоном. Думаю, одним из решений было бы сделать все дочерние элементы в li плавающими.
Стаффан Эстберг
Это работает, если я применяю clearfix для родителя li. Пойду с этим решением, спасибо PJ.
Staffan Estberg
158

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

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

ha404
источник
13
Гениальное решение. margin: 0 auto;если нужно, по центру.
Mafia
4
Я думаю, ты классный.
billynoah
1
display: table;работает, но не допускает заполнения.
donquixote
@ ha404 ты прав, обивка работает! jsfiddle.net/wgj7xvLe/4 по крайней мере в моем браузере (Chromium).
donquixote 09
3
@donquixote он должен принимать отступы, если вы используете border-collapse: отдельный. просто была та проблема.
Брэд
32

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

width: max-content;

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

Мустафа Дж.
источник
Я никогда об этом не слышал! Интересно.
Ryan
Был хорош с Chrome 46 и FF 66. Должен быть принят ответ. inline-blockи др. нарушали мой макет.
i336_
1
@ i336_ На сегодняшний день он все еще не поддерживается браузером Edge.
ChrisW,
Edge или Chromium Edge? (Для ясности; первый будет переходить на некоторое время ...)
i336_
Согласно caniuse.com, он поддерживается в Edge, начиная с версии Edge 79, выпущенной 14 января 2020 года. В целом рейтинг поддержки составляет 92%. caniuse.com/?search=max-content Приветствую меня. Когда я впервые услышал об этом почти 2 года назад, у меня не было достаточно широкой поддержки для использования в производственной среде, но теперь она есть.
Xandor
7

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

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

А затем для CSS:

.cell{display:inline-block}

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

Джордж
источник
1
Спасибо, но я бы предпочел не смешивать элементы div.
Staffan Estberg
5

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

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

Ренске
источник
2

Попробуй это:

li a {
    width: 0px;
    white-space:nowrap;
}
Роберто
источник
2

Вы можете использовать следующее:

display: inline-block;

Хорошо работает со ссылками и другими элементами.

Бруно Левек
источник
1

У меня была такая проблема, я решил ее так:

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

.child {
  display: block;
}

«white-space: nowrap» гарантирует, что дочерние элементы дочернего элемента (если он есть) не переносятся на новую строку, если недостаточно места.

без "пробела: nowrap":

введите описание изображения здесь

с "white-space: nowrap":

введите описание изображения здесь


edit: кажется, что он также работает без дочернего блока для меня, так что, похоже, это работает нормально.

.parent {
  white-space: nowrap;
  display: table;
}
Новичек
источник