#html #css #flexbox
#HTML #css #flexbox
Вопрос:
В настоящее время у меня есть текст, который выглядит следующим образом. Я хочу, чтобы более 1600 счастливых едоков были в одной строке. Заголовок и так хорош. В настоящее время я использую flexbox, если это поможет.
.currentcitiesmaincontent {
border: 1px solid red;
display: inline-flex;
width: 100%;
}
<div class="currentcitiesmaincontent">
<div>
Lisbon<br>
<p> 1600 happy eaters</p>
</div>
<div>SAN Franscisco</div>
<div>Berlin</div>
<div>London</div>
</div>
Ответ №1:
Вы также можете установить flex
макет для встроенных divs, чтобы сделать его в одной строке.
.currentcitiesmaincontent {
border: 1px solid red;
display: inline-flex;
width: 100%;
}
.currentcitiesmaincontent div {
display: flex;
}
.currentcitiesmaincontent p {
margin: 0;
padding: 0;
}
<div class="currentcitiesmaincontent">
<div>
Lisbon<br>
<p> 1600 happy eaters</p>
</div>
<div>SAN Franscisco</div>
<div>Berlin</div>
<div>London</div>
</div>
Ответ №2:
я думаю, это то, что вы ищете
.currentcitiesmaincontent {
border: 1px solid red;
display: flex;
width: 100%;
}
.currentcitiesmaincontent > div:first-child{
display : flex;
}
* {
margin : 0px;
padding: 0px;
}
<div class="currentcitiesmaincontent">
<div>
Lisbon<br>
<p> 1600 happy eaters</p>
</div>
<div>SAN Franscisco</div>
<div>Berlin</div>
<div>London</div>
</div>
Ответ №3:
Вы должны создать класс для нужного вам абзаца white-space: nowrap;
.