时间戳

首页 > 解决方案 > 在同一行显示嵌套的 div

html - 在同一行显示嵌套的 div

问题描述

我正在使用一个生成嵌套 div 的反应组件。我想设置样式强制 div 在同一行，但只能在外部容器 div 上声明样式。有没有办法在不设置内部 div 样式的情况下实现这一点？如果我可以将样式传递给“hello”div。

目前：

你好

第二行第三行

期望：

你好第二行第三行

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

标签： htmlcssreactjs

解决方案

使外部 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>

更多参考：详情

推荐阅读