如何更改项目符号或非项目符号列表中除第一行之外的所有行的缩进?

2024-04-30

所以,我有这样的简单项目符号列表:

<ul>
    <li>Apple. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis elit turpis, vel facilisis risus pellentesque nec. Curabitur dapibus libero diam, egestas congue magna dictum ut. Fusce nec tortor ut erat ultrices fermentum. Proin dolor nibh, gravida eu mi sed, imperdiet venenatis est.</li>
    <li>Orange. Integer eget velit dolor. Aenean a metus at purus convallis porttitor. Etiam hendrerit leo eu elementum tempor. Sed at semper magna. Sed tincidunt, mi at auctor hendrerit, nibh tellus lobortis dui, nec volutpat nulla lacus adipiscing erat. In quis mi at lorem ullamcorper consectetur. </li>
</ul>

通常会显示如下:

  • 苹果。 Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Vivamus venenatis elit turpis, vel facilisis risus pellentesque nec. Curabitur dapibus libero diam,egestas congue magna dictum ut。 Fusce nec totortor uterat ultrices发酵。 Proin dolor nibh,妊娠 eu mi sed,imperdiet venenatis est。
  • 橙子。整数 eget velit dolor。 Aenean a metus at purus convallis porttitor。 Etiam Hendrerit leo eu Elementum tempor。 Sed at semper magna。 Sed Tincidunt,我在 auctor hendrerit,nibh Tellus lobortis dui,nec volutpat nulla lacus adipiscingerat。 In quis mi at lorem ullamcorper consectetur。

但是,我需要更改所有行缩进except第一行所以它看起来有点像这样:

  • 苹果。 Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Vivamus venenatis elit turpis, vel      facilisis risus pellentesque nec. Curabitur dapibus libero diam,egestas congue magna dictum ut。 Fusce nec totortor uterat ultrices发酵。 Proin dolor nibh,妊娠 eu mi sed,imperdiet      venenatis est。
  • 橙子。整数 eget velit dolor。 Aenean a metus at purus convallis porttitor。 Etiam hendrerit leo eu      元素时间。 Sed at semper magna。 Sed Tincidunt,我在 auctor hendrerit,nibhtellus dui,nec volutpat nulla lacus adipiscing 时代。 In quis mi at lorem ullamcorper consectetur。

但无需更改外部 DIV 容器尺寸、填充、边距或其他任何内容。仅在 UL 或 OL 或 LI 标签上设计样式。我在网上看到的只是如何更改第一个缩进,如果结合DIV填充尺寸更改可以用来完成上述问题,但它非常复杂,因为我无法控制HTML代码。我什至不知道将来HTML代码是否会包含DIV。所以我只能把CSS交给OL、UL、LI。我如何使用纯 CSS 来实现这一点?


您可以添加填充li,然后使用负数text-indent值来替换第一行的填充。

jsFiddle 示例 http://jsfiddle.net/4VgJv/

li {
    padding-left:30px;
    text-indent:-30px;
}

这是我能想到的唯一解决方案。我尝试使用:first-line https://developer.mozilla.org/en-US/docs/Web/CSS/%3a%3afirst-line,但这在这种情况下并不起作用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何更改项目符号或非项目符号列表中除第一行之外的所有行的缩进? 的相关文章

  • 将图像编码为base64有什么效果?

    如果我将图像 jpg 或 png 转换为 base64 那么它会更大 还是具有相同的大小 会大多少呢 是否建议在我的网站上使用 Base64 编码的图像 大约会大 37 非常粗略地说 Base64 编码的二进制数据的最终大小等于原始数据大小
  • Bootstrap 5 是否删除了行之间的间距?

    我开始使用 bootstrap 5 并注意到行之间没有空格 我们是否必须明确使用spacing https getbootstrap com docs 5 0 utilities spacing 实用程序喜欢mb 3 or mb 2等等试图
  • LESS CSS 语法对现代化很有用

    通常我使用现代化 http modernizr com 了解浏览器的功能 同时 我用LESS CSS http lesscss org 使我的CSS更具可读性和可维护性 使用 LESS 嵌套规则的常见样式如下所示 header color
  • 如果一个设置多个html标签的id属性值相同,会发生什么?

    我最近看到一个html页面 我认为几个html标签的id是相同的 然后我意识到id是唯一的 但这提出了一个问题 如果页面实际上使用了多个标签 会发生什么 正如我听说每个 html 标签 如果有的话 的 id 属性必须是唯一的 现在我想知道如
  • 编辑类名中带有空格的元素的 css 样式

    我正在创建一个 tumblr 我必须编写一个外部 CSS 文件 但我在编辑 post 元素的 css 样式时遇到问题 这是它的结构 li class post quote other code li 问题是类名中有空格 我如何创建一个 CS
  • 将 JSON 发布到 Python CGI

    我已经安装了 Apache2 并且 Python 可以工作 但我有一个问题 我有两页 一个是 Python 页面 另一个是带有 JQuery 的 Html 页面 有人可以告诉我如何让我的 ajax 帖子正常工作吗
  • 在流体设计中将元素的宽度调整为其高度的百分比,反之亦然? [复制]

    这个问题在这里已经有答案了 我正在制作响应式设计 无论屏幕尺寸是什么 它都必须保持其元素的比例 高度与宽度 所以我不知道任何元素的像素大小 并且我只能以 工作 我可以将宽度或高度设置为浏览器大小的百分比 但我不知道如何设置其他属性值 仅使用
  • HTML5 支持命名空间吗?

    我们是否可以使用新标签来扩展 HTML5 例如
  • R Shinydashboard 自定义 CSS 到 valueBox

    我一直在尝试将 valueBox 的颜色更改为自定义颜色 超出 validColors 中可用的颜色 但一直无法这样做 我知道有一种方法可以使用标签来包含自定义 CSS 但是我无法将它们放在正确的位置 ui lt dashboardPage
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • GWT 主题/模板 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 GWT 开发一个应用程序 尽管 GWT 是基于 JAVA 的媒介 但外观和感觉只能通过 CS
  • 可以使用带有 HTML5 播放器的 Amazon S3/CloudFront 流式传输视频吗?

    我想使用 HTML5 视频播放器并流式传输视频 S3 CloudFront 可以实现这一点吗 我了解 Amazon 使用 RTMP 流媒体协议和 HTML5video标签不支持 RTMP 有没有办法用 HTML5 播放器播放视频 Wayne
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 如何防止弹性项目高度因其内容而溢出[重复]

    这个问题在这里已经有答案了 我刚刚开始学习 Flex 到目前为止我印象深刻 但是 我对包含页眉 页脚和三列的全页应用程序遇到了问题 第一列包含一个项目列表 由于我无法为其父级设置固定高度 因此每次列表增长时 它都会将页脚向下推 这是一个带有
  • Outlook 2013 渲染问题:嵌套表格截断相邻文本

    在开发 html 电子邮件通讯时 我经常使用类似于以下的结构 table width 244 border 0 cellpadding 0 cellspacing 0 tr td table border 0 align left tbod
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 在webview android中加载本地html文件

    我正在尝试在 android 的 webview 中加载 html 文件的内容 但是 它给了我 网页不可用错误 如果我尝试使用谷歌或雅虎等网站 它们就会起作用 html文件位于src gt main gt assests gt index
  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是
  • 使用 VBA 通过 Access 导航网页/操作 IE

    你好 StackOverflow 社区 我有一个关于使用 Access VBA 操作 IE 的问题 本质上 我正在尝试编写代码 使用 IE 打开特定网页 在该页面中搜索特定链接 目标链接的名称将取决于用户的情况 通过以编程方式单击该链接导航

随机推荐