HTML/CSS выравнивание текста не работает

Я использую следующий код для выравнивания текста:HTML/CSS выравнивание текста не работает

<strong>Status:</strong> <span style="color: #01DF3A;">Updated</span> 
<span align="right" style="text-align: right;"><strong>TeamSpeak:</strong> ts.abendigo.org</span>

Первый текст Status: Updated должен находиться слева, но вторая часть текста TeamSpeak: ts.abendigo.org должен быть на правой стороне, но при использовании обоих устаревших align="right" с style="text-align: right;", похоже, не имеет эффекта с span. Они отлично работают с другими тегами, такими как div, но я хочу сохранить оба текста в одной строке.

источник

2015-09-08 Jire

могли бы вы добавить 'поплавка: right' на свой второй' span'? – NooBskie

Определяли ли вы ширину вашего диапазона, чтобы текст имел место для перехода в правую сторону? –

span как встроенный элемент не имеет ширины или высоты. Вы можете включить его в элемент уровня блока, используя css 'display: inline-block' или 'inline: block'. – Stefan

<span> является встроенным элементом. На скриншоте ниже вы видите, что его ширина равна 188.859px, и это размер текста в нем.

Вы должны обернуть встроенные элементы в блочном элементе.Я хотел бы предложить следующее:

.status { 
 
    float: left; 
 
} 
 
.teamspeak { 
 
    float: right; 
 
}

<div class="status"> 
 
    <strong>Status:</strong><span style="color: #01DF3A;">Updated</span> 
 
</div> 
 
<div class="teamspeak"> 
 
    <strong>TeamSpeak:</strong> ts.abendigo.org</span> 
 
</div>

источник

2015-09-08 08:24:21

Это решение работает правильно. Я решил не использовать классы, а просто использовать 'style =' для 'div'. Благодаря! – Jire

NB: этот ответ объясняет, как работают уровни блоков и встроенных элементов.

Недвижимость text-align работает только с элементами блока. <span> является inline. Вы должны использовать <div> или <p>.

<strong>Status:</strong> <span style="color: #01DF3A;">Updated</span> 
<div style="text-align: right;"> 
    <span><strong>TeamSpeak:</strong> ts.abendigo.org</span> 
</div>

NB: Вы можете установить продолжительность быть блок-элемент, но если ваш HTML не фиксирована (генерируется другим приложением), и вы не можете изменить его, не делают этого. Лучше придерживайтесь стандартного и используйте div или p.

span { display: block; }

Чтобы получить рабочий раствор следует использовать float: right; на пролете. Я не понимаю, почему вам нужно использовать float:left; по другому тексту.

источник

2015-09-08 08:21:42 SPRBRN

У меня проблема с этим, она идет по второй строке: http://i.imgur.com/zIv8VYO.png – Jire

Мое объяснение было больше о уровне блока и встроенных элементах. Вам нужно использовать float, чтобы вторая строка отображалась на одной высоте. – SPRBRN

Самый простой способ заключается в использовании блоков или таблицу, где есть выравнивания текста свойство работает на:

<strong>Status:</strong> <span style="color: #01DF3A;display:inline-block;width:45%">Updated</span><span align="right" style="text-align: right;display:inline-block;width:45%"><strong>TeamSpeak:</strong> ts.abendigo.org</span> 

<table width="100%"> 
    <tr> 
     <td><strong>Status:</strong> <span style="color: #01DF3A">Updated</span></td> 
     <td style="text-align:right"><span align="right" style="text-align:right"><strong>TeamSpeak:</strong> ts.abendigo.org</span></td> 
    </tr> 
</table>

Попробуйте скрипку: JSFiddle

источник

2015-09-08 08:26:45

Использование таблиц для этого происходит через десять лет. Мы больше этого не делаем! – SPRBRN

Пробуйте нижеследующую ссылку

.status{ 
     float:left 
    } 
    .team{ 
     float:right; 
    }

Fiddle - Link

источник

2015-09-08 08:28:06 Mahadevan

обратите внимание, что когда вы используете float, тогда вы должны использовать clear: оба тоже, иначе вы получите пустое пространство. –

HTML

<div class="container"> <strong>Status:</strong> 
<span class="left">Updated</span> 
<span class="right"> 
<strong>TeamSpeak:</strong> ts.abendigo.org</span> 
</div>

CSS

.left { 
text-align:left; 
color: #01DF3A 
} 
.right { 
float:right; 
}

источник

2015-09-08 09:04:04

Вы можете использовать этот

<div> 
    <strong>Status: </strong><span style="color: #01DF3A;">Updated</span> 
    <span style="float:right">TeamSpeak: ts.abendigo.org</span> 
</div>

источник

2015-09-08 10:05:04 Sourceforest

HTML:

<div class="status"> 
    <strong>Status:</strong><span style="color: #01DF3A;">&nbsp;Updated</span> 
</div> 
<div class="teamspeak"> 
    <strong>TeamSpeak:</strong> ts.abendigo.org</span> 
</div>

Css:

.status { 
    float: left; 
} 
.teamspeak { 
    float: right; 
}

Demo

источник

2015-09-08 10:13:29

HTML/CSS выравнивание текста не работает

ответ

Смежные вопросы