2016-05-14 5 views
-4

Я динамически генерирую divs и нуждаюсь в решении точно так же (без внешнего стиля или css, потому что они игнорируются при динамическом росте после загрузки страницы). Я не понимаю, почему браузер игнорирует мой текст-выравнивание: правильно. Также я хочу сохранить h и span (нет p). Обычно мы должны видеть час слева и пролетом справа на одной и той же базовой линии:Заголовок и диапазон в той же строке

<!DOCTYPE html> 
<body> 

<div style="background-color:green;color:white;"> 
    <h1 style="display:inline">Green, color of hope</h1> 
    <span style="text-align:right">I hope to display this to the right</span> 
</div> 

</body> 
</html> 
+2

'выравнивание текст: right' выравнивает инлайн содержимое справа от элемента блока с атрибутом. span является встроенным. вы пробовали 'float: left' на h1 и' float: right' на span и 'overflow: hidden' на обертке div. что вы должны, вероятно, стремиться к большей семантической разметке вместо этого, связанные таблицы стилей не должны игнорироваться либо ... динамический контент на самом деле не является оправданием для плохой разметки –

+0

Из того, что я пробовал в пятницу, все, что я хотел бы добавить между тегами стиля (или в css-лист) будут игнорироваться на элементах, динамически добавленных после загрузки страницы, поэтому, хотя это было нормально, и только тот встроенный стиль работал бы в этой точке. Нет, у меня не было большого успеха с float, потому что текст справа выравнивается вверху, а не базовой ... –

ответ

0

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

<style> 
    .left{text-align:left;font-size:18px;font-weight:bold;} 
    .right{float:right;font-size:14px;padding-top:4px} 
</style> 

<span class='left'>Left</span><span class='right'>Right</span> 
2

Flexbox можно сделать:

<div style="background-color:green;color:white; display:flex; justify-content:space-between; align-items:baseline;"> 
 
    <h1>Green, color of hope</h1> 
 
    <span>I hope to display this to the right</span> 
 
</div>

+0

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

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