一般情况下像下图这样需要缩进的,一般都会外面一个div里面两块需要两个div然后用定位或者flex、table、浮动后设置宽度等来实现

已知宽度的情况下上面列的方法都适用

不知宽度的情况下可以用flex、table等来实现

<div class="main">
<div class="list">八卦:八卦,见于《周易·系辞下》云:“古者包牺氏之王天下也,仰则观象于天,俯则观法于地;观鸟兽之文与地之宜;近取诸身,远取诸物,于是始作八卦,以通神明之德,以类万物之情。” [1] 八卦生自太极、两仪、四象中,“四象生八卦”。</div>
<div class="list">天气:天气是指某一个地区距离地表较近的大气层在短时间内的具体状态。而天气现象则是指发生在大气中的各种自然现象,即某瞬时内大气中各种气象要素(如气温、气压、湿度、风、云、雾、雨、闪、雪、霜、雷、雹、霾等)空间分布的综合表现。</div>
</div>

如果和上面这样的列表一样,就不适合之前的做法了

可以直接给list添加padding和text-indent来实现

.list{
padding-left: 50px;
text-indent: -50px;
}

css换行后缩进,css缩进技巧的更多相关文章

  1. 关于css的text-indent首行缩进两个字符和图片缩进的问题

    段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent. text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. <style typ ...

  2. CSS换行:word-wrap、word-break和text-wrap区别

    一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...

  3. CSS换行2

    1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图 换行说明图无间隔 ...

  4. CSS 布局:40个教程、技巧、例子和最佳实践

    前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...

  5. CSS换行:word-wrap、word-break和text-wrap差别

    一.word-wrap:同意对长的不可切割的单词进行切割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:仅仅在同意的断字点换行(浏览器保 ...

  6. css水平居中,竖直居中技巧(二)

    css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  7. css水平居中,竖直居中技巧(一)

    css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  8. CSS性能优化的8个技巧

    本文作者:高峰,360奇舞团前端工程师,W3C性能工作组成员,同时参与WOT工作组的学习. 我们都知道对于网站来说,性能至关重要,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验 ...

  9. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

随机推荐

  1. pip 安装使用国内镜像

    pip国内的一些镜像 阿里云 https://mirrors.aliyun.com/pypi/simple/中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple ...

  2. DML_Data Modification_DELETE

    DML_Data Modification_Delete删除记录比较简单,但是需要特别注意,一不小心,就变成了 “从删库到跑路“ 就掉的大了 /* Microsoft SQL Server 2008 ...

  3. MongoDB 逻辑备份工具mongodump

    mongodump是官方提供的一个对数据库进行逻辑导出的备份工具,导出文件为BSON二进制格式,无法使用文本编辑工具直接查看.mongodump可以导出mongod或者mongos实例的数据,从集群模 ...

  4. numpy中数组(矩阵)的乘法

    我们知道在处理数据的时候,使用矩阵间的运算将会是方便直观的.matlab有先天的优势,算矩阵是它的专长.当然我们用python,经常要用到的可能是numpy这个强大的库. 矩阵有两种乘法,点乘和对应项 ...

  5. 阿里P7终于讲完了JDK+Spring+mybatis+Dubbo+SpringMvc+Netty源码

    前言 这里普及一下,每个公司都有职别定级系统,阿里也是,技术岗以 P 定级,一般校招 P5, 社招 P6 起.其实阅读源码也是有很多诀窍的,这里分享几点心得: 首先要会用.你要知道这个库是干什么的,掌 ...

  6. CentOS7 开机进入emergency mode

    今天突然操作了一下磁盘挂载,然后系统启动之后,就直接进入emergency模式了,然后只能输入密码进行救援,截图如下: 突然想了一下最近的一次操作,是因为要挂在镜像,然后每次开机都要挂载一次,觉得比较 ...

  7. python django 批量上传文件并绑定对应文件的描述

  8. 解决React Native安装应用到真机(红米3S)报Execution failed for task ':app:installDebug'的错误

    报错信息如下: :app:installDebug Installing APK 'app-debug.apk' on 'Redmi 3S - 6.0.1'Unable to install D:\R ...

  9. 下订单更新订单表然后减少库存表中的数据,出现库存超卖,使用数据库和redis坚决库存超卖的问题

    上面的代码更新库存的数据,存在多线程的问题,第一种方法使用synchronized关键字修饰的语句块代码,但是性能较低,并且还是存在问题的 在分布式的场景下,当前库存系统部署在多个tomcat上,即使 ...

  10. JDK8--08:Optional

    在程序运行时,空指针异常应该是最常见的异常之一,因此JDK8提供了Optional来避免空指针异常. 首先说明JDK8新增的Optional及相关方法的使用 Optional的常用操作: Option ...