Как я могу выровнять текст по левому краю и текст по правому краю в одной строке?

Question 1

Как я могу выровнять текст так, чтобы часть его выровнялась по левому краю, а часть по правому краю в пределах одной строки?

<p>This text should be left-aligned. This text should be right aligned.</p>

Я могу выровнять весь текст по левому (или по правому) краю, либо непосредственно в строке, либо с помощью таблицы стилей -

<p style='text-align: left'>This text should be left-aligned. 
    This text should be right aligned.</p>

Как я могу выровнять соответствующий текст по левому и правому краю, оставив его в одной строке?

Question 2

<p style="text-align:left;">
    This text is left aligned
    <span style="float:right;">
        This text is right aligned
    </span>
</p>

Развернуть фрагмент

https://jsfiddle.net/gionaf/5z3ec48r/

Question 3

HTML:

<span class="right">Right aligned</span><span class="left">Left aligned</span>

css:

.right{
    float:right;
}

.left{
    float:left;
}

Демо:
http://jsfiddle.net/W3Pxv/1

Question 4

Если вы не хотите использовать плавающие элементы и хотите убедиться, что оба блока не перекрываются, попробуйте:

<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%;  display: inline-block;">RIGHT</p>

Question 5

HTML-ФАЙЛ:

<div class='left'> Left Aligned </div> 
<div class='right'> Right Aligned </div>

CSS-ФАЙЛ:

.left
{
  float: left;
}

.right
{
  float: right;
}

и все готово ....

Question 6

<h1> left <span> right </span></h1>

css:

h1{text-align:left; width:400px; text-decoration:underline;}
span{float:right; text-decoration:underline;}

Question 7

Хотя некоторые из решений здесь будут работать, ни одно из них не справляется с перекрытием и в конечном итоге перемещает один элемент ниже другого. Если вы пытаетесь разметить данные, которые будут динамически привязаны, вы не узнаете до времени выполнения, что они выглядят плохо.

Что мне нравится делать, так это просто создавать однострочную таблицу и применять правильное число с плавающей запятой ко второй ячейке. Не нужно применять выравнивание по левому краю к первому, это происходит по умолчанию. Это отлично справляется с перекрытием за счет переноса слов.

HTML

<table style="width: 100%;">
  <tr><td>Left aligned stuff</td>
      <td class="alignRight">Right aligned stuff</td></tr>
</table>

CSS

.alignRight {
  float: right;
}

https://jsfiddle.net/esoyke/7wddxks5/

Question 8

Добавьте интервал для каждого или группы слов, которые вы хотите выровнять влево или вправо. затем добавьте идентификатор или класс в диапазон, например:

<h3>
<span id = "makeLeft"> Left Text</span>
<span id = "makeRight"> Right Text</span>
</h3>

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

Question 9

Если вы используете Bootstrap, попробуйте следующее:

<div class="row">
    <div class="col" style="text-align:left">left align</div>
    <div class="col" style="text-align:right">right align</div>
</div>

Question 10

Если вы просто хотите изменить выравнивание текста, просто создайте классы

.left {
text-align: left;
}

и охватите этот класс по тексту

<span class='left'>aligned left</span>

Answer 1

Как я могу выровнять текст так, чтобы часть его выровнялась по левому краю, а часть по правому краю в пределах одной строки?

<p>This text should be left-aligned. This text should be right aligned.</p>

Я могу выровнять весь текст по левому (или по правому) краю, либо непосредственно в строке, либо с помощью таблицы стилей -

<p style='text-align: left'>This text should be left-aligned. 
    This text should be right aligned.</p>

Как я могу выровнять соответствующий текст по левому и правому краю, оставив его в одной строке?

Answer 2

174

<p style="text-align:left;">
    This text is left aligned
    <span style="float:right;">
        This text is right aligned
    </span>
</p>

Развернуть фрагмент

https://jsfiddle.net/gionaf/5z3ec48r/

Джиона
источник

1

text-align:left;он должен быть float:left;похож на Левый текст Правый текст

Шайлендра Мадда,

Answer 3

1

text-align:left;он должен быть float:left;похож на Левый текст Правый текст

Шайлендра Мадда,

Answer 4

37

HTML:

<span class="right">Right aligned</span><span class="left">Left aligned</span>

css:

.right{
    float:right;
}

.left{
    float:left;
}

Демо:
http://jsfiddle.net/W3Pxv/1

Пуйоль
источник

@mawg Хотя может быть, я предпочитаю верхний ответ, потому что он не требует css.

Menasheh

4

Сейчас «на вершине» или «больше всего голосов»? И то, и другое может измениться, так что вы не поможете никому из будущих читателей :-) В любом случае, хотя я начинал, как и вы, со всем стилем, я вскоре понял, что есть веские причины для разделения содержания и представления. CSS - это не страшно, и есть много бесплатных руководств

дерзайте

Answer 5

@mawg Хотя может быть, я предпочитаю верхний ответ, потому что он не требует css.

Menasheh

Answer 6

4

Сейчас «на вершине» или «больше всего голосов»? И то, и другое может измениться, так что вы не поможете никому из будущих читателей :-) В любом случае, хотя я начинал, как и вы, со всем стилем, я вскоре понял, что есть веские причины для разделения содержания и представления. CSS - это не страшно, и есть много бесплатных руководств

дерзайте

Answer 7

18

Если вы не хотите использовать плавающие элементы и хотите убедиться, что оба блока не перекрываются, попробуйте:

<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%;  display: inline-block;">RIGHT</p>

Джек Миллер
источник

Это единственный ответ, который позволяет использовать более двух столбцов, что мне и требовалось. Это, вероятно, более детальный контроль, чем заботился OP.

Kristen Hammack

Answer 8

Это единственный ответ, который позволяет использовать более двух столбцов, что мне и требовалось. Это, вероятно, более детальный контроль, чем заботился OP.

Kristen Hammack

Answer 9

9

HTML-ФАЙЛ:

<div class='left'> Left Aligned </div> 
<div class='right'> Right Aligned </div>

CSS-ФАЙЛ:

.left
{
  float: left;
}

.right
{
  float: right;
}

и все готово ....

Усама Явар Хаваджа
источник

Это старый вариант, но вы должны окружить 2 DIV другим тегом, например DIV, иначе он не сработает.

Панама Джек

Answer 10

Это старый вариант, но вы должны окружить 2 DIV другим тегом, например DIV, иначе он не сработает.

Панама Джек

Answer 11

7

<h1> left <span> right </span></h1>

css:

h1{text-align:left; width:400px; text-decoration:underline;}
span{float:right; text-decoration:underline;}

Веб-дизайнер и промоутер
источник

Answer 12

7

Хотя некоторые из решений здесь будут работать, ни одно из них не справляется с перекрытием и в конечном итоге перемещает один элемент ниже другого. Если вы пытаетесь разметить данные, которые будут динамически привязаны, вы не узнаете до времени выполнения, что они выглядят плохо.

Что мне нравится делать, так это просто создавать однострочную таблицу и применять правильное число с плавающей запятой ко второй ячейке. Не нужно применять выравнивание по левому краю к первому, это происходит по умолчанию. Это отлично справляется с перекрытием за счет переноса слов.

HTML

<table style="width: 100%;">
  <tr><td>Left aligned stuff</td>
      <td class="alignRight">Right aligned stuff</td></tr>
</table>

CSS

.alignRight {
  float: right;
}

https://jsfiddle.net/esoyke/7wddxks5/

Эрик Сойк
источник

Для меня это близко к золотому, но есть ли идея, почему использование свойств таблицы CSS делает две ячейки вне линии по горизонтали? jsfiddle.net/7wddxks5/7 Кажется, я не могу обойти это стороной .

addMitt

1

На самом деле, для меня, поскольку я хочу, чтобы правый текст был выровнен по правому краю, это, кажется, отлично работает, если я просто назначу text-align: right и избавлюсь от float.

addMitt

Я также не мог понять, почему это вызывает вертикальное смещение. Но я смог исправить это с помощью vertical-align. Также стили были перенесены в классы, чтобы немного очистить HTML. jsfiddle.net/o10ogqkd

Эрик Сойк

здесь это элегантное решение. Я думаю , что это должно быть принято отвечать , как он использует более творческий подход в использовании таблицы тегов

Rotimi

Answer 13

Для меня это близко к золотому, но есть ли идея, почему использование свойств таблицы CSS делает две ячейки вне линии по горизонтали? jsfiddle.net/7wddxks5/7 Кажется, я не могу обойти это стороной .

addMitt

Answer 14

1

На самом деле, для меня, поскольку я хочу, чтобы правый текст был выровнен по правому краю, это, кажется, отлично работает, если я просто назначу text-align: right и избавлюсь от float.

addMitt

Answer 15

Я также не мог понять, почему это вызывает вертикальное смещение. Но я смог исправить это с помощью vertical-align. Также стили были перенесены в классы, чтобы немного очистить HTML. jsfiddle.net/o10ogqkd

Эрик Сойк

Answer 16

здесь это элегантное решение. Я думаю , что это должно быть принято отвечать , как он использует более творческий подход в использовании таблицы тегов

Rotimi

Answer 17

Добавьте интервал для каждого или группы слов, которые вы хотите выровнять влево или вправо. затем добавьте идентификатор или класс в диапазон, например:

<h3>
<span id = "makeLeft"> Left Text</span>
<span id = "makeRight"> Right Text</span>
</h3>

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

Answer 18

3

Согласно спецификации html, ваш пример должен использовать класс, а не идентификатор.

Серхио

Answer 19

Если вы используете Bootstrap, попробуйте следующее:

<div class="row">
    <div class="col" style="text-align:left">left align</div>
    <div class="col" style="text-align:right">right align</div>
</div>

Answer 20

-1

Если вы просто хотите изменить выравнивание текста, просто создайте классы

.left {
text-align: left;
}

и охватите этот класс по тексту

<span class='left'>aligned left</span>

bntrns
источник

3

Это половина ответа на вопрос о множественных выравниваниях в строке.

TimZaman

Answer 21

3

Это половина ответа на вопрос о множественных выравниваниях в строке.

TimZaman

Как я могу выровнять текст по левому краю и текст по правому краю в одной строке?

Ответы: