Html 左右缩进文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2675852/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Indent text left and right
提问by Elliott
I am using the p tagto align text left and right on the same line using:
我正在使用以下方法p tag在同一行上左右对齐文本：
.left
{
float: left;
text-indent: 5px;
margin-top: 0px;
}
.right
{
float: right;
text-indent: 5px;
margin-top: 0px;
}
<div id="content">
<p class="left">Left Text </p>
<p class="right">Right Text </p>
</div>
The left text will indent by 5 pixels, the right text will not. I have tried -5px and just 5px, any ideas how I could do this?
左侧文本将缩进 5 个像素，右侧文本不会。我试过 -5px 和 5px，有什么想法可以做到吗？
Thanks
谢谢
回答by Sarfraz
You can use margin-leftand margin-rightinstead. Or padding-leftand padding-rightdepending on your desired output/requirement.
您可以使用margin-leftandmargin-right代替。或者padding-left，padding-right取决于您想要的输出/要求。
回答by Robert
This should work
这应该工作
<html>
<head>
<style type="text/css">
.left
{
float: left;
margin-left: 50px;
}
.right
{
float: right;
margin-right: 50px;
}
#content
{
}
</style>
</head>
<body>
<div id="content">
<div class="left">Left Text </div>
<div class="right">Right Text </div>
</div>
</body>
</html>
回答by nikc.org
I'm not sure text-indentis what your're looking for. Just to clarify: text-indentwill indent the first row of the paragraph. Indentation is always on the left side, as long as (text-)directionis ltr, otherwise of course on the right side. All following rows will start at the boundaries of the paragraph block.
我不确定text-indent是你在找什么。只是为了澄清：text-indent将缩进段落的第一行。缩进总是在左侧，只要 (text-)direction是ltr，否则当然在右侧。接下来的所有行都将从段落块的边界开始。
If you want to "indent" the whole block, you're looking for either marginor padding.
如果你想“缩进”整个块，你正在寻找margin或padding。
Also, you're not giving the floated paragraphs a width, so they will adapt to their contents, which might be the cause of you not seeing any indentation happening.
此外，您没有为浮动段落设置宽度，因此它们会适应其内容，这可能是您看不到任何缩进发生的原因。
Edit: An example. Take a look at this in a browser. Then remove the text-indentto see what happens. As you will notice, it does work as it should, but not as you expect it to. (Or, that is, if I have understood what you're going after.)
编辑：一个例子。在浏览器中看看这个。然后取出来text-indent看看会发生什么。您会注意到，它确实按预期工作，但并不像您期望的那样工作。（或者，也就是说，如果我已经了解您要追求的内容。）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
.col {
border: 1px solid red;
display: inline;
float: left;
text-indent: 5px;
}
.col-left {
}
.col-right {
float: right;
}
</style>
</head>
<body>
<p class="col col-left">Lorem ipsum dolor sit amet</p>
<p class="col col-right">Lorem ipsum dolor sit amet</p>
</body>
</html>
