css换行后缩进,css缩进技巧
一般情况下像下图这样需要缩进的,一般都会外面一个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缩进技巧的更多相关文章
- 关于css的text-indent首行缩进两个字符和图片缩进的问题
段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent. text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. <style typ ...
- CSS换行:word-wrap、word-break和text-wrap区别
一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...
- CSS换行2
1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图 换行说明图无间隔 ...
- CSS 布局:40个教程、技巧、例子和最佳实践
前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...
- CSS换行:word-wrap、word-break和text-wrap差别
一.word-wrap:同意对长的不可切割的单词进行切割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:仅仅在同意的断字点换行(浏览器保 ...
- css水平居中,竖直居中技巧(二)
css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...
- css水平居中,竖直居中技巧(一)
css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...
- CSS性能优化的8个技巧
本文作者:高峰,360奇舞团前端工程师,W3C性能工作组成员,同时参与WOT工作组的学习. 我们都知道对于网站来说,性能至关重要,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验 ...
- 获取元素计算后的css样式封装
获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...
随机推荐
- (三)log4j常用配置
控制台(console) log4j.appender.stdout = org.apache.log4j.ConsoleAppender log4j.appender.stdout.Target = ...
- macos的两个快捷键和一个小tip
学校的linux协会介绍了一个免费的light轻量级加速器,昨天晚上十点左右的时候着手研究,发现其实就是一个代理服务器.在配置这个代理服务器的时候碰到了一些困难并最终都解决了.下面记录一下配置过程学到 ...
- php 判断设备是手机还是平板还是pc
1 <?php 2 //获取USER AGENT 3 $agent = strtolower($_SERVER['HTTP_USER_AGENT']); 4 5 //分析数据 6 $is_pc ...
- Java中在数字前自动补零方法
/** * 数字前面自动补零 * @param number 数字 * @return */ public static String geFourNumber(int number){ Number ...
- JDBC——使用JDBC连接MySQL数据库
在JDBC--什么是JDBC一文中我们已经介绍了JDBC的基本原理. 这篇文章我们聊聊如何使用JDBC连接MySQL数据库. 一.基本操作 首先我们需要一个数据库和一张表: CREATE DATABA ...
- 【K8S】Service服务详解,看这一篇就够了!!
k8s用命名空间namespace把资源进行隔离,默认情况下,相同的命名空间里的服务可以相互通讯,反之进行隔离. 1.1 Service Kubernetes中一个应用服务会有一个或多个实例(Pod, ...
- Golang简易入门教程——面向对象篇
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是golang专题的第9篇文章,我们一起来看看golang当中的面向对象的部分. 在现在高级语言当中,面向对象几乎是不可或缺也是一门语言 ...
- 黎活明8天快速掌握android视频教程--14_把文件存放在SDCard
把文件保存在手机的内部存储空间中 1 首先必须在清单文件中添加权限 <?xml version="1.0" encoding="utf-8"?> & ...
- 慕课网--java权限管理系统
http://coding.imooc.com/class/evaluation/149.html
- IOC/DI概念简述及基本应用
早几年面试时,面试官经常问我依赖注入的概念,但有面试官自己都不是很清楚ioc和di的区别,而是草草归于一类,今天翻了翻以前写的demo,顺便把这部分概念整理出来,加深一下印象. 先科普一下,IOC是什 ...