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

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

相关推荐
前端Hardy2 小时前
HTML&CSS:惊艳!科技感爆棚的登录页面代码解析
前端·javascript·html
Dxy12393102163 小时前
Python Requests-HTML库详解:从入门到实战
开发语言·python·html
Darling02zjh8 小时前
HTML5
前端·html·html5
CodeCraft Studio1 天前
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
开发语言·python·html·markdown·aspose·html转markdown·asposel.html
冰菓Neko1 天前
HTML 常用标签速查表
前端·html
qq_三哥啊1 天前
【HTML】<script>元素中的 defer 和 async 属性详解
html·js
Dxy12393102161 天前
Python HTML模块详解:从基础到实战
开发语言·python·html
Amodoro2 天前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
飛_2 天前
【Word Press基础】创建一个动态的自定义区块
运维·nginx·html·word press
oioihoii2 天前
恋爱时间倒计时网页设计与实现方案
html