与缩进对齐 [英] Align right with indentation

问题描述

我有文本，它必须正确对齐，当这个文本占用多条线和回绕时，该新行必须与后面的行区分开来，所以我试图让它缩进

我试过在[htmlhelp论坛主题＃8327]和[codingforums主题]中提出的建议＃58451]以及两者的组合无法使用（Can not post links。Sorry。）。有没有其他方法可以完成这个？

我的尝试：

  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; 
} 
  

第一行上的文本变为红色（以便我知道发生了什么）

 <$ c $ 
 
 
 
 c>< div class ='poem'> 
< ul class ='poem'> 
< li>这里是诗歌的一行< / li> 
< li>这是同一节的第二行，它很长，会包围< / li> 
< li>上面一行的部分现在在第3行，看起来应该是自己的一行。< / li> 
< / ul> 
< / div> 
  

解决方案

到此为止：

  p {direction：rtl; padding-right：100px; text-indent：-100px;} 
  pre> 
 
 
这将css方向设置为从右到左。 
然后添加右边填充以从右边缩进整个内容
然后使用负的缩进，使第一行变得过量。
 
 
 
你的内容和文本流仍然是从左到右（即在右边的断裂），它只是解释css（例如段落文本缩进）在另一边。
 
 
 
这是我的代码：
 
 
 
  http://jsbin.com/ukese5/7  
 
I have text which has to be right aligned, and when this text takes up more than one line and wraps around, that new line has to be distinguishable from the line after, so I'm trying to get it to indent on the right side, but I can't find a solution which works.

I've tried what was suggested on [the htmlhelp forums thread #8327] and [codingforums thread #58451] as well as a combination of the two to no avail (Can't post links. Sorry.). Is there any other way of accomplishing this?

My attempts:
div.poem li:after
{
 content: " ";
 display: inline-block;
 width: 10px; 
}
Does something, but I don't want it to indent if the text only takes up one line.
div.poem li::first-line::after
{
 content: "asdf";
}
Does nothing
div.poem li:first-line
{
 color: red;
 margin-right: 200px;
 padding-right: 200px;
}
Text on the first line turns red (so that I know what's going on) but the margin and padding doesn't do anything.

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>

解决方案
Here you go:
p {direction:rtl;padding-right:100px;text-indent:-100px;}
This sets the css direction to be from right to left.
Then add right padding to indent the whole thing from the right
Then use a negative indent that causes the first line to be "outdented"

Your content and text-flow is still left to right (i.e. breaks on the right), it just interprets the css (e.g. paragraph text-indent) on the other side.

Here's my code:

http://jsbin.com/ukese5/7

                        
这篇关于与缩进对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！