LINUX.ORG.RU
Форум — Web-development  

как такое сделать css-ом ?


0

1

есть текст в тегах <pre></pre> внутри него могут быть слова обрамлённые <span class=«remark»> - вот их бы разместить справа на заданном отступе в той-же строки где встретились.

то есть текст

<pre>строка1
какой-то текст <span class=«remark»>заметка</span> ещё текст
строка2</pre>

должен отрендерится в 

строка1
какой-то текст ещё текст            заметка
строка2

★★★★★
← Какие технологии использовать и на чем писать?
набор програм вёрстки html css →
Ответ на: комментарий от Jaberwock

спасибо, сработало..почти как надо

два следующие друг за другом <span class=«remark»> накладываются. Хотелось бы чтобы и вправо складывались как встречаются, но боюсь для css это уже фантастика :)

проще наверное на другом уровне вытащить их в отдельный блок

MKuznetsov ★★★★★
() автор топика

На заданном отступе от чего?

Если от правого края, то так:

.remark {
  float: right;
  margin-right: 13px;
}

Если слева от остальной строки, то так: 

.remark {
  margin-left: 13px;
}

Apple-ch ★★
()
Ответ на: комментарий от Jaberwock

Ну, я не настоящий сварщик, но Apple-ch уже сказал.

Miguel ★★★★★
()
Ответ на: комментарий от MKuznetsov

два следующие друг за другом <span class=«remark»> накладываются. Хотелось бы чтобы и вправо складывались как встречаются, но боюсь для css это уже фантастика :)

А если магию в стиле .remark + .remark { магия_здесь;} ?

anonymous
()
Ответ на: комментарий от Jaberwock

Вангую, это из-за того, что у тебя происходит перенос строк. Стиль, который я привёл, будет работать, только если каждая строка (вместе с ремаркой) помещается на одной строке.

Какое поведение должно быть в случае длинных строк?

Apple-ch ★★
()

Раз воткнул <pre>, то и форматируй пробелами.

Kalashnikov ★★★
()
Ответ на: комментарий от Miguel

Заметка оказывается на одну строчку ниже

Такое только в фейлфоксе. В сафари, престоопере, ие 10 всё ок

Вот сниппет (бордеры добавил для наглядности).

Apple-ch ★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Какие технологии использовать и на чем писать?
Web-development
набор програм вёрстки html css →