Blok wyświetlacza bez 100% szerokości

98

Chcę ustawić element span, aby pojawiał się pod innym elementem za pomocą właściwości display. Próbowałem zastosować blok inline, ale bez powodzenia, i pomyślałem, że mógłbym użyć bloku, jeśli w jakiś sposób uda mi się uniknąć nadania elementowi szerokości 100% (nie chcę, aby element się „rozciągał”). Czy można to zrobić, a jeśli nie, jakie są dobre praktyki przy rozwiązywaniu tego rodzaju problemów?

Przykład: lista wiadomości, na której chcę ustawić link „czytaj więcej” na końcu każdego posta (uwaga: <a>zamiast <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

Aktualizacja: rozwiązane. W CSS zastosuj

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

— Staffan Estberg
źródło

1

Czy masz jakieś znaczniki (HTML lub CSS), które chcesz nam pokazać? Trudno jest pracować nad problemem bez niczego, nad czym można by popracować. Przydałoby się również demo na jsfiddle .

— Tom Oakley

Pomyślałem, że nie potrzebuję żadnego przykładowego kodu, ponieważ chodzi tylko o umieszczenie elementu span. Zobacz zaktualizowany post.

— Staffan Estberg

Możesz poważnie ograniczyć wszystkie te znaczniki, używając tylko jednej linii kodu, jak wspomniałem poniżej.

— ha404

75

Jeśli dobrze rozumiem twoje pytanie, poniższy kod CSS przeniesie twoją a poniżej rozpiętości i sprawi, że nie będzie miała 100% szerokości:

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

— PJ McCormick
źródło

Próbowałem to zastosować, ale ponieważ elementy span (tytuł i data, w tym przykładzie) nie mają wartości float, łącze zostaje umieszczone przed ostatnim zakresem. Pewnie jednym rozwiązaniem byłoby uczynienie wszystkich elementów potomnych w li float.

— Staffan Estberg

Działa to, jeśli zastosuję poprawkę Clearfix dla rodzica li. Pójdzie z tym rozwiązaniem, dzięki PJ.

— Staffan Estberg

158

Użyj display: table.

Ta odpowiedź musi mieć co najmniej 30 znaków; Wpisałem 20, więc oto kilka więcej.

— ha 404
źródło

13

Genialne rozwiązanie. margin: 0 auto;jeśli potrzebujesz go wyśrodkowany.

— Mafia

4

Myślę, że jesteś niesamowity.

— billynoah

1

display: table;działa, ale nie akceptuje dopełnienia.

— donquixote

@ ha404 masz rację, obicie działa! jsfiddle.net/wgj7xvLe/4 przynajmniej w mojej przeglądarce (Chromium).

— donquixote

3

@donquixote powinno akceptować dopełnienie, o ile używasz border-collapse: oddziel. właśnie miałem ten problem.

— Brad,

32

możesz użyć:

width: max-content;

Uwaga: obsługa jest ograniczona, sprawdź tutaj pełny opis obsługiwanych przeglądarek

— Mustafa J.
źródło

Nigdy o tym nie słyszałem! Ciekawy.

— Ryan

Był dobry od Chrome 46 i FF 66. Powinna zostać zaakceptowana odpowiedź. inline-blocket al psuje mój układ.

— i336_

1

@ i336_ Na dzień dzisiejszy nadal nie jest obsługiwany przez przeglądarkę Edge.

— ChrisW

Edge czy Chromium Edge? (Żeby było jasne; ten pierwszy będzie się przenosił przez dłuższy czas ...)

— i336_

Według caniuse.com jest obsługiwany w Edge od wersji Edge 79 opublikowanej 14 stycznia 2020 r. W sumie ma 92% wsparcia. caniuse.com/?search=max-content To miło powitanie. Kiedy po raz pierwszy o nim usłyszałem prawie 2 lata temu, nie miał wystarczająco szerokiego wsparcia, abym mógł go używać w produkcji, ale teraz tak.

— Xandor

7

Zachowałbym każdy wiersz w swoim własnym div, więc ...

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

A potem dla CSS:

.cell{display:inline-block}

Trudno jest znaleźć rozwiązanie bez zobaczenia oryginalnego kodu.

— Jerzy
źródło

1

Dzięki, ale wolałbym nie mieszać żadnych elementów div.

— Staffan Estberg

5

Znowu: odpowiedź, która może być trochę za późno (ale dla tych, którzy i tak znajdą tę stronę jako odpowiedź).

Zamiast display:block;używaćdisplay:inline-block;

— Renske
źródło

2

Spróbuj tego:

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

— Roberto
źródło

2

Możesz użyć następujących:

display: inline-block;

Działa dobrze z linkami i innymi elementami.

— Bruno Leveque
źródło

1

Miałem ten problem, rozwiązałem go tak:

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

.child {
  display: block;
}

"white-space: nowrap" zapewnia, że dzieci dziecka (jeśli takie istnieją) nie zawijają się do nowej linii, jeśli nie ma wystarczającej ilości miejsca.

bez „spacji: nowrap”:

z „white-space: nowrap”:

edycja: wydaje się, że działa również bez części bloku potomnego, więc wydaje się, że działa dobrze.

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

— Nowicjusz
źródło