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

— Новичек
источник