Отображение вложенных div в одной строке

Question

Я работаю с компонентом реакции, который создает вложенные блоки div. Я бы хотел, чтобы стили div были в одной строке, но могли объявлять стили только во внешнем контейнере div. Есть ли способ добиться этого без стилизации внутренних div? Если бы только я мог передать стиль в div "hello".

В настоящее время:

привет

secondLine Третья линия

Желаемое:

привет secondLine третья строка

<div style={{ textAlign: "left", whiteSpace: "nowrap" }}>
        <div style={{ display: "inline" }}>
            <div>hello</div>
        </div>
        {` `}
        <div style={{ display: "inline" }}> secondDiv </div>
        <div style={{ display: "inline" }}> thirdDiv </div>
    </div>

Answer 1

, если у вас есть доступ и вы можете изменить HTML, изменить внутренний <div> на <span> или любой встроенный элемент, родительский div имеет display:inline, а внутренний div будет иметь полную ширину, игнорируя родительский элемент, имеющий встроенный дисплей, потому что внутренний div имеет блок отображения по умолчанию:

<div style="textAlign:left, whiteSpace:nowrap">
    <div style="display:inline">
        <span style="display:inline">hello</span>
    </div>
    <div style="display:inline"> secondDiv </div>
    <div style="display:inline"> thirdDiv </div>
</div>

для вашего jsx-кода это должно быть так:

<div style={{ textAlign: "left", whiteSpace: "nowrap" }}>
  <div style={{ display: "inline" }}>
    <span>hello</span>
  </div>
  {` `}
  <div style={{ display: "inline" }}> secondDiv </div>
  <div style={{ display: "inline" }}> thirdDiv </div>
</div>

Answer 2

сделать внешний дисплей div: 'flex'

<div style={{ textAlign: "left", whiteSpace: "nowrap",display:"flex" }}>
    <div style={{ display: "inline" }}>
        <div>hello</div>
    </div>
    { }
    <div style={{ display: "inline" }}> secondDiv </div>
    <div style={{ display: "inline" }}> thirdDiv </div>
</div>

Дополнительные сведения: подробности