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

Question 1

Я хочу, чтобы элемент 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;
}

Question 2

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

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

Question 3

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

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

Question 4

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

width: max-content;

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

Question 5

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

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

А затем для CSS:

.cell{display:inline-block}

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

Question 6

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

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

Question 7

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

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

Question 8

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

display: inline-block;

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

Question 9

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

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

.child {
  display: block;
}

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

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

с "white-space: nowrap":

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

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

Answer 1

Я хочу, чтобы элемент 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;
}

Answer 2

1

У вас есть разметка (HTML или CSS), чтобы показать нам? Трудно работать над проблемой, не над чем реально поработать. Также была бы хороша демонстрация на jsfiddle .

Tom Oakley

Answer 3

Думал, что мне не нужен образец кода, так как он просто позиционирует элемент span. См. Обновленный пост.

Стаффан Эстберг

Answer 4

Вы можете серьезно сократить всю эту разметку, используя всего одну строку кода, как я упоминал ниже.

ha404

Answer 5

75

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

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

Пи Джей МакКормик
источник

Я попытался применить это, но поскольку элементы диапазона (заголовок и дата в примере) не имеют плавающего положения, ссылка размещается перед последним диапазоном. Думаю, одним из решений было бы сделать все дочерние элементы в li плавающими.

Стаффан Эстберг

Это работает, если я применяю clearfix для родителя li. Пойду с этим решением, спасибо PJ.

Staffan Estberg

Answer 6

Я попытался применить это, но поскольку элементы диапазона (заголовок и дата в примере) не имеют плавающего положения, ссылка размещается перед последним диапазоном. Думаю, одним из решений было бы сделать все дочерние элементы в li плавающими.

Стаффан Эстберг

Answer 7

Это работает, если я применяю clearfix для родителя li. Пойду с этим решением, спасибо PJ.

Staffan Estberg

Answer 8

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: отдельный. просто была та проблема.

Брэд

Answer 9

13

Гениальное решение. margin: 0 auto;если нужно, по центру.

Mafia

Answer 10

4

Я думаю, ты классный.

billynoah

Answer 11

1

display: table;работает, но не допускает заполнения.

donquixote

Answer 12

@ ha404 ты прав, обивка работает! jsfiddle.net/wgj7xvLe/4 по крайней мере в моем браузере (Chromium).

donquixote 09

Answer 13

3

@donquixote он должен принимать отступы, если вы используете border-collapse: отдельный. просто была та проблема.

Брэд

Answer 14

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

Answer 15

Я никогда об этом не слышал! Интересно.

Ryan

Answer 16

Был хорош с Chrome 46 и FF 66. Должен быть принят ответ. inline-blockи др. нарушали мой макет.

i336_

Answer 17

1

@ i336_ На сегодняшний день он все еще не поддерживается браузером Edge.

ChrisW,

Answer 18

Edge или Chromium Edge? (Для ясности; первый будет переходить на некоторое время ...)

i336_

Answer 19

Согласно caniuse.com, он поддерживается в Edge, начиная с версии Edge 79, выпущенной 14 января 2020 года. В целом рейтинг поддержки составляет 92%. caniuse.com/?search=max-content Приветствую меня. Когда я впервые услышал об этом почти 2 года назад, у меня не было достаточно широкой поддержки для использования в производственной среде, но теперь она есть.

Xandor

Answer 20

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

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

А затем для CSS:

.cell{display:inline-block}

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

Answer 21

1

Спасибо, но я бы предпочел не смешивать элементы div.

Staffan Estberg

Answer 22

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

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

Answer 23

2

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

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

Роберто
источник

Answer 24

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

display: inline-block;

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

Answer 25

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

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

.child {
  display: block;
}

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

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

с "white-space: nowrap":

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

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

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

Ответы: