Blok wyświetlacza bez 100% szerokości

Question 1

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;
}

Question 2

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; 
}

Question 3

Użyj display: table.

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

Question 4

możesz użyć:

width: max-content;

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

Question 5

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.

Question 6

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;

Question 7

Spróbuj tego:

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

Question 8

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

display: inline-block;

Działa dobrze z linkami i innymi elementami.

Question 9

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;
}

Answer 1

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;
}

html width block css 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

Answer 2

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

Answer 3

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

Staffan Estberg

Answer 4

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

ha404

Answer 5

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

Answer 6

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

Answer 7

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

Staffan Estberg

Answer 8

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,

Answer 9

13

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

Mafia

Answer 10

4

Myślę, że jesteś niesamowity.

billynoah

Answer 11

1

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

donquixote

Answer 12

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

donquixote

Answer 13

3

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

Brad,

Answer 14

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

Answer 15

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

Ryan

Answer 16

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

i336_

Answer 17

1

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

ChrisW

Answer 18

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

i336_

Answer 19

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

Answer 20

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

Answer 21

1

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

Staffan Estberg

Answer 22

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;

Answer 23

2

Spróbuj tego:

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

Roberto
źródło

Answer 24

2

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

display: inline-block;

Działa dobrze z linkami i innymi elementami.

Bruno Leveque
źródło

Answer 25

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;
}

Blok wyświetlacza bez 100% szerokości

Odpowiedzi: