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

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

相关推荐
葡萄城技术团队13 小时前
所有网站通用:6 行 HTML 代码搞定页面加载提速
html
糖糖TANG14 小时前
从零开始制作我的第一个静态网页——教师节主题首页开发记录
html
前端老鹰1 天前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
芦苇Z1 天前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
Alice-YUE2 天前
【CSS学习笔记3】css特性
前端·css·笔记·html
破无差2 天前
《赛事报名系统小程序》
小程序·html·uniapp
从零开始学习人工智能2 天前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
yddddddy2 天前
html基本知识
前端·html
小白64023 天前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·css·html
蓝胖子的多啦A梦3 天前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配