Question

我的文本必须正确对齐，当这个文本占用多行并换行时，新行必须与之后的行区分开来，所以我试图让它缩进右边，但我找不到有效的解决方案。

我已经尝试了[htmlhelp论坛帖子＃8327]和[codingforums线程＃58451]的建议，以及两者的组合无济于事（无法发布链接。抱歉。）。有没有其他方法可以实现这个目标？

我的尝试：

div.poem li:after
{
 content: " ";
 display: inline-block;
 width: 10px; 
}

做某事，但如果文本只占用一行，我不希望它缩进。

div.poem li::first-line::after
{
 content: "asdf";
}

什么都不做

div.poem li:first-line
{
 color: red;
 margin-right: 200px;
 padding-right: 200px;
}

第一行的文字变为红色（这样我就知道发生了什么）但是边距和填充没有做任何事情。

HTML：

<div class='poem'>
    <ul class='poem'>
        <li>Here's one line of the poem</li>
        <li>This is the second line of the same stanza, which is long and will wrap around</li>
        <li>Part of the line above is now on line 3, and looks like it's supposed to be a line of its own.</li>
    </ul>
</div>

Answer 1

你走了：

p {direction:rtl;padding-right:100px;text-indent:-100px;}

这将css方向设置为从右到左。然后添加右侧填充以从右侧缩进整个内容然后使用负缩进导致第一行“缩进”

您的内容和文字流仍然是从左到右（即右侧的中断），它只是解释了另一方的CSS（例如段落文字缩进）。

这是我的代码：

http://jsbin.com/ukese5/7

Answer 2

我找到了一个示例here，其中解释了如何创建左缩进的链接列表。它似乎只适用于左对齐文本，因为该方法包括使用text-indent。在你的情况下（左对齐），它看起来像这样：

div.poem li  { padding-left: 2em; text-indent: -1em;  }
div.poem     { text-align: right; }

我尝试对齐它，但是没有用。文本是从右到左阅读的吗？在这种情况下，这应该有效：

div.poem li  { padding-left: 2em; text-indent: -1em;  }
div.poem     { direction: rtl; }

我假设他的HTML标记：

  <div class="poem">
    <ul>
      <li>This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.</li>
    </ul>
  </div>

根据您的<li>结构更新了答案：

div.poem li:nth-child(3)  { padding-right: 2em;  }
div.poem { text-align: right; }

请注意，这些是CSS3选择器，而且旧版浏览器不支持:nth-child()。由于阅读英文文本仍然有效，您也可以使用该解决方案。要了解详情，请访问specification page。

另一个想法：如果您使用代码创建这些<li>，则可以在<li>上添加要缩进的类。然后使用更多浏览器友好的CSS来缩进它。

唯一剩下的就是要弄清楚你是否想要子弹点。这些可以带走：

div.poem ul  { list-style: none; }

与缩进对齐

2 个答案: