Question

我使用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>

左侧文字将缩进5个像素，右侧文本则不缩进。我尝试过-5px和5px，我有什么想法可以做到这一点吗？

由于

Answer 1

您可以改用margin-left和margin-right。或padding-left和padding-right，具体取决于您所需的输出/要求。

Answer 2

这应该有效

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

Answer 3

我不确定text-indent是您正在寻找的。只是为了澄清：text-indent将缩进段落的第一行。只要（text - ）direction为ltr，缩进始终位于左侧，否则当然在右侧。所有后续行都将从段落块的边界开始。

如果您想“缩进”整个区块，则需要margin或padding。

此外，你没有给浮动段落一个宽度，所以他们会适应他们的内容，这可能是你没有看到任何缩进发生的原因。

编辑：一个例子。在浏览器中查看此内容。然后删除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>

左右缩进文本

3 个答案: