Ausrichten von Texten in Spannen

Question

Ich versuche, "Try diese" in der gleichen Zeile und danach die "Äpfel" Block wie es jetzt zeigt. Was mache ich falsch?

.aaa { 
 
\t display: flex; 
 
    padding: 20px; 
 
\t background-color: #000; 
 
\t font-size: 2em; 
 
} 
 

 
.aaa span { 
 
    display: inline; 
 
\t color: red; 
 
    justify-content: center; 
 
} 
 

 
.q { 
 
background-color: green; 
 
}

<div class="q"> 
 
<a href="#" class="aaa">Try these <span>apples apples apples apples apples applesapples apples applesapples apples applesapples apples apples</span></a> 
 
</div>

Answer 1

Fügen Sie einfach white-space:nowrap in den Hauptbehälter und legen Sie es zurück zum Anfang in den Äpfeln c ontainer

Ich hat auch einen unzerbrechlichen Raum Raum zwischen fast

.aaa { 
 
    display: flex; 
 
    padding: 20px; 
 
    background-color: #000; 
 
    font-size: 2em; 
 
    white-space: nowrap; 
 
} 
 

 
.aaa span { 
 
    display: inline; 
 
    color: red; 
 
    justify-content: center; 
 
    white-space: initial; 
 
} 
 

 
.q { 
 
    background-color: green; 
 
}

<div class="q"> 
 
    <a href="#" class="aaa">Try these &nbsp;<span>apples apples apples apples apples applesapples apples applesapples apples applesapples apples apples</span></a> 
 
</div>

Answer 2

Änderungen müssen Sie machen:

• beide q class container machen und die anchor class aaa als flex, dies stellt sicher, dass Sie Ihren Anker in der gleichen Linie ausgerichtet haben und dann die Spanne innerhalb des Ankers auch ausgerichtet wie gezeigt. Verwenden Sie dann die Eigenschaft von flex: 1 auf ihren beiden untergeordneten Containern, d. H. Für q => aaa und für aaa=>span. Dies stellt sicher, dass sie bei der Größenanpassung flexibel sind.

.aaa { 
 
    display: flex; 
 
    flex: 1; 
 
    padding: 20px; 
 
    background-color: #000; 
 
    font-size: 2em; 
 
} 
 

 
.aaa span { 
 
    flex: 1; 
 
    color: red; 
 
    justify-content: center; 
 
} 
 

 
.q { 
 
    background-color: green; 
 
    display: flex; 
 
}

<div class="q"> 
 
    <a href="#" class="aaa"> Try these &nbsp;<span> apples apples apples apples apples applesapples apples applesapples apples applesapples apples apples</span></a> 
 
</div>

Answer 3

versuchen, es in einem grid setzen, wo "Versuchen Sie diese" 4/12 Spalten nehmen und Äpfel 8/12 stattfinden wird. Oder setzen Sie zwei Abschnitte in eine table, nur stellen Sie sicher, dass Grenzen unsichtbar sind.

Answer 4

Anzeige: flex; nimmt jeden Block des Inhalts und behandelt es wie seine eigene Entität, dann versucht, sie zu setzen, wie auch immer Sie Ihre flexiblen Einstellungen haben. In diesem Fall verwenden Sie die Standardeinstellungen.

Im Grunde ist es, dies zu tun

[any amount] [any other] 
[of content] [content ] 

Sie wollen die Flex Richtung setzen, so dass sie auf der jeweils anderen sind, so versuchen Sie dies:

flex-direction: column; 

Diese die Ausgabe machen sollte:

[any amount of content] 
[any other content]