HTML: Как сделать так, чтобы текст в средней строке выстраивался в линию так же, как и другие строки, такие как «табуляции» - PullRequest
Новая
       11

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

0 голосов
/ 29 сентября 2011

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

Телефон: (234) 567-8910
Ячейка: (234) 567-8910
Факс: (234) 567-8910
Электронная почта: mike@example.com

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

    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 (который, среди прочего, не принимает маржу или плавающее значение).

Ответы [ 2 ]

3 голосов
/ 29 сентября 2011

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

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

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

2 голосов
/ 29 сентября 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 demo, используя float: left;.

...