美文网首页
css换行后缩进,css缩进技巧

css换行后缩进,css缩进技巧

作者: 我是七月 | 来源:发表于2024-05-29 11:45 被阅读0次

一般情况下像下图这样需要缩进的,一般都会外面一个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: 2em;
    text-indent: -2em;
}

相关文章

  • Sass 学习笔记

    一、 简介 * nested:嵌套缩进的css代码,它是默认值。* expanded:没有缩进的、扩展的css代码...

  • JavascriptDay02

    �一 javascript书写规范 . javascript与html,css一样,对空格,换行,以及缩进是不敏感...

  • 用css解决文字换行缩进

    解决代码

  • CSS自动换行后,第二行缩进

    效果如下: 设置:

  • css段落缩进

    在讲方法之前,我们现讲一下px,它代表 像素单位,一个像素只能展现一种颜色,且像素是一种相对单位。且每英寸能容纳的...

  • css 换行 首行缩进 鼠标样式

    css换行 1⃣️强制不换行 2⃣️自动换行 3⃣️强制英文单词断行 4⃣️本人在用 中英文都换行 ⚠️:官方解释...

  • 文字缩进妙用-CSS隐藏文字的方法

    text-indent 正值向右缩进,负值向左缩进 CSS隐藏文字的方法 利用负值向左缩进,设置很大的值就可以达到...

  • CSS文本

    CSS文本 文本的颜色、字符间距,对齐文本,装饰文本,文本缩进设置。 文本缩进 使用text-indent属性对文...

  • Sass

    Sass 提供四个编译风格的选项 -nested:嵌套缩进的css代码,它是默认值 expanded:没有缩进的、...

  • css小知识

    CSS设置缩进、字体间距、行间距(行高) 1. 缩进 text-index text-index:20px; 段落...

网友评论

      本文标题:css换行后缩进,css缩进技巧

      本文链接:https://www.haomeiwen.com/subject/wyzkqjtx.html