html 设置元素向左浮动

简介: html 设置元素向左浮动

设置向左浮动的子元素的父元素的 display 属性为 'flex'。下面是 ant deisgn 里的样式写法,普通的 HTML 按照最普通的写法给相同属性赋值即可。

<div style={{ display: 'flex' }}>
      <div style={{ width: '85px' }}>第一个子元素:</div>
      <div style={{ width: '85px' }}>第二个子元素:</div>
    </div>

我是设置这个就解决了,如果还不行,或许需要设置父元素的宽度和每个子元素的宽度,然后把需要左浮的子元素的 float 属性设置成 left , display 设置成 inline

<div style={{ display: 'flex', display: 'flex' }}>
      <div style={{ width: '85px' }}>第一个子元素:</div>
      <div style={{ width: '85px', float: 'left', display: 'inline' }} >第二个子元素:</div>
    </div>
相关文章
|
6天前
|
前端开发
html中行内元素、块级元素、行内快元素都有哪些,以及区别
html中行内元素、块级元素、行内快元素都有哪些,以及区别
18 1
|
10天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
12天前
|
移动开发 JavaScript 前端开发
【专栏:HTML进阶篇】HTML模板与Web组件:可复用的网页元素
【4月更文挑战第30天】HTML模板和Web组件提升网页开发效率和可维护性。HTML模板,如&lt;template&gt;元素和服务器端模板引擎,用于创建可复用的HTML结构。Web组件是自定义的HTML元素,结合影子DOM和模板,实现封装的可重用组件。两者助力构建高效、现代的网页和网站。
|
12天前
|
移动开发 前端开发 JavaScript
【专栏:HTML基础篇】深入HTML元素:理解结构与内容
【4月更文挑战第30天】本文探讨了HTML在构建网页中的核心作用,HTML元素构成网页结构与内容,包括`&lt;!DOCTYPE html&gt;`、`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`等基本元素及`&lt;div&gt;`、`&lt;span&gt;`、`&lt;a&gt;`、`&lt;img&gt;`等丰富标签。理解并恰当使用这些元素能创建清晰结构、优化SEO、增强交互性,并实现语义化,为打造功能强大且美观的网站奠定基础。进一步学习CSS和JavaScript将提升网页视觉效果和互动性。
|
13天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
24天前
|
搜索推荐
《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)
《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)
25 0
《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)
|
25天前
|
JavaScript 前端开发
在JavaScript中怎样获取或修改HTML元素。
在JavaScript中怎样获取或修改HTML元素。
|
25天前
|
前端开发 JavaScript
JavaScript 获取 HTML 元素
JavaScript 获取 HTML 元素
|
26天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
29 10
|
26天前
|
JavaScript 前端开发 数据安全/隐私保护
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
10 0