先看UI图

像这种数字和文字对齐，一开始的想法是，分标签来搞，想怎么搞都可以，后来咨询同事，学习更多的做法，发现还有可以有以下两种方式

1.用ul li标签  ， ul设置css属性：<ul style="list-style-type:decimal">

开始怀疑这种属性的兼容性，怕有很多问题，后来查询：

发现其兼容性，不错，放心使用

2.使用下面的css属性：

　text-indent: -2em;

　margin-left: 2em;

然后调整下样式即可

数字和文字 css对齐设置的更多相关文章

  1. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  2. 实现段落文字两端对齐的css样式

    有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐.其实实现段落的两端对齐,只需要设置两个css 样式即可. .demo{ text-align: jus ...

  3. css实现一行文字居中，多行文字左对齐

    问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...

  4. 通过代码设置button中文字的对齐方式

    // button.titleLabel.textAlignment = NSTextAlignmentLeft; 这句无效 button.contentHorizontalAlignment = U ...

  5. 【】小技巧】CSS文字两端对齐

    需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度 ...

  6. 使用CSS达到文字首尾对齐效果

    在制作表单的时候经常会遇到需要不同个数的文字首尾对齐,比如: <span>姓名:</span> <span>联系方式:</span> 姓名: 联系方式: ...

  7. css text-align文字两端对齐

    text-align:start | end | left | right | center | justify | match-parent | justify-all justify: 内容两端对 ...

  8. CSS如何设置换行文字自动对齐

    CSS如何设置换行文字自动对齐 如图所示: 代码实现如下: <ul class='warn-page-content'>                <li>         ...

  9. p标签text-align:justify以及CSS文字两端对齐

    p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...

  10. 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式！

    块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...

随机推荐

  1. SignalR服务端嵌入到WPF

    用的是.net framework 4.7.2的WPF. <Window x:Class="EBServerTry.MainWindow" xmlns="http: ...

  2. ASP.NET Core MiniAPI中 EndPoint相关

    1.状态码返回之演化之路 1.1最基本的就是用Results或者TypedResults返回带有状态码的响应(可选Json响应体) app.MapGet("/fruit/{id}" ...

  3. VirtualBox 导入/注册 虚拟机文件 .vbox 失败

    VirtualBox 导入/注册 虚拟机文件 .vbox 失败 问题情景 Error: Failed to open virtual machine located in <.vbox所在目录& ...

  4. Spring Boot中使用注解实现简单工厂模式

    前言 从设计模式的类型上来说,简单工厂模式是属于创建型模式,又叫静态工厂模式(Simple Factory Pattern),但不属于23种GOF设计模式之一.简单工厂模式是由一个工厂对象决定创建出接 ...

  5. MySQL中自增长序列(@i:=@i+1)的用处及用法

    问题分析    Oracle中的伪列 ROWNUM 是一组递增的序列,在查询数据时生成,为结果集中每一行标识一个行号, 每条记录会因为输出的顺序不同而获得不同的逻辑编号:此自增长序列可以视作起始值为 ...

  6. 邮件收件、读取邮件API-批量导入-支持代理-开放HTTP接口

    简介 大恩邮箱收件平台,支持读取收件箱.垃圾箱的邮件.支持批量导入各大邮箱平台的账号(例如微软.谷歌.网易.QQ等),采用pop3.imap协议收件,支持配置代理IP.验证码截取规则等,同时提供了HT ...

  7. Ant Design 的 a-input-number 组件限制最小值和最大值以及限制输入为数值型

    1.限制输入最大小值 <a-input-number v-model="form.deviceCpuThreshold" placeholder="请输入CPU阈值 ...

  8. kubernetes获取Pod内容器信息

    一.简单说明 在实际的业务需求中,我们可能需要在写yaml文件的时候,可以在Pod的container内获取Pod的spec,metadata等信息,包含:node的名称,pod的名称,pod的nam ...

  9. 关于ChatmoneyAI的讨论

    本文由 ChatMoney团队出品 最近ChatmoneyAI团队"打鸡血"似的全力开发,更新频繁到备受同行关注,那今天我们来浅谈一下ChatmoneyAI.它之所以能被认可,并不 ...

  10. Solon AI + MCP实战：5行代码搞定天气查询，LLM从此告别数据孤岛

    此文参考自:https://www.toutiao.com/article/7505712149642117669/ 一.痛点直击:为什么你的AI模型会"一问三不知"? 当你问 L ...