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


95

Я хочу встановити, щоб елемент 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 була б непоганою.
Том Оклі

Думав, що мені не потрібен зразок коду, оскільки мова йде лише про позиціонування елемента span. Дивіться оновлену публікацію.
Staffan Estberg

Ви можете серйозно скоротити всю цю розмітку, просто використовуючи лише один рядок коду, як я вже згадував нижче.
ha404,

Відповіді:


73

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

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

Я спробував застосувати це, але оскільки елементи span (заголовок і дата, у прикладі) не мають плаваючого зв'язку, посилання розміщується перед останнім інтервалом. Думаю, одним із рішень було б зробити так, щоб усі дочірні елементи у лі плавали.
Стаффан Естберг

Це працює, якщо я застосую чіткий виправлення для батьківської програми li. Погодимось із цим рішенням, дякую PJ.
Staffan Estberg

157

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

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


13
Геніальне рішення. margin: 0 auto;якщо вам це потрібно по центру.
Mafia

4
Я думаю, ти чудова.
billynoah

1
display: table;працює, але не приймає жодних відступів.
donquixote

@ ha404 ти маєш рацію, підбивання працює! jsfiddle.net/wgj7xvLe/4 принаймні в моєму браузері (Chromium).
donquixote

3
@donquixote він повинен приймати заповнення, якщо ви використовуєте border-kolaps: окремо. просто мала цю проблему.
Бред,

30

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

width: max-content;

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


Я ніколи про це не чув! Цікаво.
Райан

Було добре, оскільки 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 роки тому, він не мав достатньо широкої підтримки для використання у виробництві, але зараз він має.
Ксандор

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;



1

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

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

.child {
  display: block;
}

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

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

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

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

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


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

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

0

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

display: inline-block;

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.