HTML: как сделать так, чтобы текст в средней строке выровнялся так же, как и в других строках, таких как вкладки

Я пытаюсь создать файл подписи HTML и хочу, чтобы номера телефонов и тому подобное выстраивались в линию.

Телефон: (234) 567-8910
Мобильный: (234) 567-8910
Факс: (234) 567-8910
Электронная почта: [email protected]

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

    Phone: <span style="margin-left:12px;"><?=$phone ?></span><br/>
    Cell: <span style="margin-left:23px;"><?=$cell ?></span><br/>
    Fax: <span style="margin-left:25px;"><?=$fax ?></span><br/>
    Email: <span style="margin-left:14px;"><?=$email ?></span><br/>

Поскольку таблицы обесценены, я не хочу полагаться на них.

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


person Mike    schedule 28.09.2011    source источник


Ответы (2)


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

В вашем случае ваши данные являются табличными. У вас есть столбец слева, определяющий типы контента, и столбец справа, определяющий значения.

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

person BraedenP    schedule 28.09.2011

Используйте список определений:

<dl>
    <dt>Phone</dt>
    <dd>Some number</dd>
    <dt>Cell</dt>
    <dd>Some mobile number</dd>
    <dt>Fax</dt>
    <dd>Seriously, a fax?</dd>
    <dt>Email</dt>
    <dd>An email address</dd>
</dl>

CSS:

dl {
    width: 80%;
    margin: 0 auto;
}

dt,dd {
    display: inline-block;
    /* or you could use:
    float: left;
    */
}

dt {
    width: 30%;
}

dd {
    width: 65%;
}

демонстрация JS Fiddle с использованием display: inline-block;.

демонстрация JS Fiddle с использованием float: left;.

person David says reinstate Monica    schedule 28.09.2011
comment
Наши пользователи недостаточно технически подкованы, чтобы делать свои собственные подписи, так что да, серьезно, факс :D - person Mike; 29.09.2011
comment
к сожалению, Outlook не поддерживает {display: inline-block;} или {float: left;}, поэтому мне придется сделать table. - person Mike; 29.09.2011
comment
Ах... как-то мне удалось пропустить требование электронной почты (уже поздно и так далее... извините =/), если вы работаете с электронной почтой, проще всего притвориться, что последние пятнадцать лет веб-разработки, и лучших практик, никогда не было... - person David says reinstate Monica; 29.09.2011
comment
@Mike: хотя я благодарю вас за согласие, этот ответ не решает вашу проблему, тогда как я думаю, что @BraedenP отвечает. Или, по крайней мере, направляет вас в правильном направлении. Мой ответ полезен для общего веб-дизайна, но не для почтовых клиентов. Конечно, если вам требуется совместимость с Outlook. - person David says reinstate Monica; 29.09.2011
comment
Да, я изменю его и отредактирую свой первоначальный вопрос, включив в него упоминание Outlook (хотя это важно для клиентов, которые используют наши клиенты, большинство из них, я думаю, будут использовать Outlook Express или почту Windows). - person Mike; 29.09.2011