Отступ текста слева и справа - PullRequest
Новая
       3

Отступ текста слева и справа

2 голосов
/ 20 апреля 2010

Я использую 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, есть идеи, как мне это сделать?

Спасибо

Ответы [ 3 ]

7 голосов
/ 20 апреля 2010

Вместо этого вы можете использовать margin-left и margin-right. Или padding-left и padding-right в зависимости от желаемого результата / требования.

6 голосов
/ 20 апреля 2010

Это должно работать 

<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>
2 голосов
/ 20 апреля 2010

Я не уверен, text-indent это то, что вы ищете. Просто чтобы уточнить: text-indent будет отступать первый ряд абзаца. Отступы всегда на левой стороне, если (текст -) 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...