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

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

相关推荐
书唐瑞7 小时前
谷歌浏览器和火狐浏览器对HTML的嗅探(Sniff)能力
前端·html
quan26318 小时前
日常开发20251022,传统HTML表格实现图片+视频+预览
前端·javascript·html·html列表实现图片+视频
昔人'14 小时前
html`contenteditable`
前端·html
静待雨落17 小时前
为什么给<a>标签设置了download属性, 浏览器没有下载而是打开新标签!!
html
小羊不会c++吗(黑客小羊)19 小时前
HTML教程——1,css
css·html
程序猿追1 天前
Vue组件化开发
前端·html
sky0Lan1 天前
一个类似 pytest 的 html 报告
android·html·pytest
用户6600676685391 天前
用HTML5 构建一个敲击乐钢琴
html
Qinana1 天前
📚 论如何用代码谈一场不露脸的恋爱
前端·前端框架·html
www_stdio1 天前
HTML5 敲击乐:模块化开发打造交互式钢琴应用的实践指南
html