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

代码如下:

html 复制代码
<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>

当外层的父元素的背景设为黑色,字体为白色的情况下,效果如下:

当然可以把边框去掉,去掉边框的代码如下:

html 复制代码
<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>

当外层的父元素的背景设为黑色,字体为白色的情况下,效果如下:

相关推荐
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
Ocean☾6 小时前
前端基础-html-注册界面
前端·算法·html
顾菁寒21 小时前
WEB第二次作业
前端·css·html
Qhumaing1 天前
html第一个网页
网络·html·html5
前端Hardy1 天前
HTML&CSS:爱上班的猫咪
前端·javascript·css·vue.js·html
前端Hardy1 天前
超萌!HTML&CSS:打造趣味动画卡通 dog
前端·css·html·css3
Komorebi⁼1 天前
JavaScript的对象事件监听处理,交互式网页的关键!
开发语言·前端·javascript·css·html
布兰妮甜1 天前
HTML5:网页开发的新纪元
前端·html·html5
想要成为祖国的花朵1 天前
Web前端_HTML5(新增type类型)
前端·html·html5
羊小猪~~1 天前
前端入门一之HTML知识讲解
前端·javascript·css·前端框架·html·html5