[решено] Вёрстка подписи в письме. div без переноса на новую стоку

[Tonny_Bennet]

Здравствуйте.

Решил сверстать подпись для компании и столкнулся с одной проблемой. Подпись выглядит так:


С уважением,
Василий Пупкин
супермегаадминище всея сети
раб. тел. +7(456)123-45-67
моб. тел. +7(456)987-65-43
ICQ 123 456 789
www.myvebsite.ru


Но в одном из филиалов компании несколько рабочих телефонов и было решено сделать одну надпись "раб.тел." и все телефоны вровень с самым первым выстроить. Как сделать таблицей я знаю:


<table border="0px">
<tr>
<td>раб.тел.</td> <td>+7(456)123-45-67<td>
</tr>
<tr>
<td></td> <td>+7(456)123-45-67</td>
</tr>
</table>


Хочется сделать одним div-ом. Если использовать nowrap, то внутри него строки тоже не переносятся. Подскажите пожалуйста как быть.

[DedAlex]

Тэг <pre> не подойдет?

[Tonny_Bennet]

DedAlex, вы предлагаете пробелами набить отступы?

И ещё одно замечание:

Элемент <pre> определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику.


Этот тег изменяет шрифт и текст телефонов выделяется на фоне основного текста подписи.

[softter]

А почему просто не использовать тег переноса строки <br>?


<div>
...
раб. тел. +7(456)123-45-67<br>
моб. тел. +7(456)987-65-43<br>
ICQ 123 456 789
</div>

[Iska]

softter, потому что набор информации иной:
<div>
...
раб. тел. +7(456)123-45-67<br>
моб. тел. +7(456)987-65-43<br>
+7(456)bla-bla-bla<br>
+7(456)bla-bla-bla<br>
ICQ 123 456 789
</div>

[DedAlex]

DedAlex, вы предлагаете пробелами набить отступы? »
Да.Этот тег изменяет шрифт и текст телефонов выделяется на фоне основного текста подписи. »
Я предлагал все засунуть в pre.

<pre>
С уважением,
Василий Пупкин
супермегаадминище всея сети
раб. тел. +7(456)123-45-67
моб. тел. +7(456)987-65-43
+7(456)987-65-43
+7(456)987-65-43
ICQ 123 456 789
www.myvebsite.ru
</pre>

[Tonny_Bennet]

DedAlex, запихнул всё в pre. Приемлемо, но есть одно "НО":

можно ли запретить тегу <pre> изменять шрифт? сделать так что бы он его наследовал от родительского элемента.

[Tonny_Bennet]

Сделал через добавление свойства font: inherit !important; в стиль тега pre. Но т.к. шрифт уже не моноширинный вёрстка пробелами поплыла. Переделал всё в тегах table.


<style>
table {
font: inherit !important;
color: inherit !important;
margin: -3 !important;
}

.block1 {
padding: 0px;
margin-left: 2px;
margin-top: 5px;
}
</style>
<a href="www.myvebsite.ru"><img src="data:image/png;base64, код_логотипа"></a><br>
<div class="block1">
С уважением,<br>
Имя Фамилия<br>
должность<br>
<table border="0px">
<tr>
<td>раб.тел.</td><td>+7(NNN)NNN-NN-NN</td>
</tr>

<tr>
<td></td> <td>+7(NNN)NNN-NN-NN</td>
</tr>

<tr>
<td>моб.тел.</td><td>+7(NNN)NNN-NN-NN</td>
</tr>
</table>
ICQ NNN NNN NNN<br>
<a href="www.myvebsite.ru">www.myvebsite.ru</a>
</div>