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

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

相关推荐
大G哥4 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext4 小时前
html初识
前端·html
NoneCoder7 小时前
HTML 模板技术与服务端渲染
服务器·servlet·html
码农研究僧7 小时前
Vue3 上传后的文件智能预览(实战体会)
vue·html·图片预览
三巧8 小时前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
软件技术NINI8 小时前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html
NoneCoder11 小时前
HTML与Web 性能优化:构建高速响应的现代网站
前端·性能优化·html
张张张31212 小时前
4.23-4.26学习总结 HTML—CSS常见标签和样式
css·学习·html
爱编程的鱼14 小时前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html
datacollectionspecia16 小时前
优化无头浏览器流量:使用Puppeteer进行高效数据抓取的成本降低策略
python·html