用HTML的原生语法实现两个div子元素在同一行中排列

原创于 2024-01-03 15:43:58 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html

HTML 专栏收录该内容

17 篇文章

订阅专栏

文章详细描述了如何在HTML中使用CSS创建一个带有黑色背景和白色字体的flex布局，包括外层父元素的样式设置和子元素的inline-block布局。展示了两种版本，一种带边框，另一种去掉了边框。

代码如下：

<div id="level1" style="display: flex;">
    <div id="level2-1" style="display: inline-block; padding: 10px; border: 1px solid #ccc; margin: 5px;">
        这是第一个元素。
    </div>
    <div id="level2-2" style="display: inline-block; padding: 10px; border: 1px solid #ccc; margin: 5px;">
        这是第二个元素。
    </div>
</div>

当外层的父元素的背景设为黑色，字体为白色的情况下，效果如下：
在这里插入图片描述
当然可以把边框去掉，去掉边框的代码如下：

<div id="level1" style="display: flex;">
    <div id="level2-1" style="display: inline-block; padding: 10px; margin: 5px;">
        这是第一个元素。
    </div>
    <div id="level2-2" style="display: inline-block; padding: 10px; margin: 5px;">
        这是第二个元素。
    </div>
</div>