Выравнивание текста.Используя таблицы или CSS или? - PullRequest
Новая
       22

Выравнивание текста.Используя таблицы или CSS или?

1 голос
/ 26 июля 2010

Часто я выравниваю текст, такой как:

До: 07.02.2010
От: 07.02.2010

Мне бы хотелось, чтобы это отображалось так: 

To:   07/02/2010
From: 07/02/2010

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

Что вы рекомендуете?

Ответы [ 6 ]

3 голосов
/ 26 июля 2010

Определенно список определений (<dl>) . 

<dl>
    <dt>From:</dt><dd>07/02/2010</dd>
    <dt>To:</dt><dd>07/02/2010</dd>
</dl>

/* CSS */

dl {
    overflow: hidden;
}

dt {
    width: 50px;
    float: left;
}
2 голосов
/ 26 июля 2010

Я бы порекомендовал таблицы.Это действительно лучший способ, особенно если учесть, что там действительно табличные данные, а HTML не поддерживает табуляции.

Но действительно глупо избегать таблиц ради того, чтобы избегать таблиц.Если вы не хотите, чтобы опция позже была оформлена следующим образом: 

To:          From:
07/02/2010   07/02/2010

Вы можете сделать что-то подобное, если по какой-то причине вы не хотите использовать таблицы:

CSS

.sideheading { width: 3em; float: left; }

HTML 

<div class="sideheading">To:</div>07/02/2010
<div class="sideheading">From:</div>07/02/2010

Или используйте список определений (но если причина, по которой вы избегаете таблиц, связана с семантикой, DL будутследует избегать того же самого).

Но, конечно, речь идет о макете, ни один клиент или веб-серфер никогда не будет заботиться о том, как вы это делаете, если они могут его прочитать!

1 голос
/ 26 июля 2010

Я видел эту проблему раньше, быстрый поиск в Google:

http://www.google.com/search?q=css+forms

... привел меня сюда:

http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml

... и я скопировал HTML и CSS в это: 

<html>
    <head>
        <style>
        label
        {
            width: 5em;
            float: left;
            text-align: right;
            margin-right: 1em;
            display: block
        }

        .submit input
        {
            margin-left: 4.5em;
        }
        </style>
    </head>
    <body>
        <form action="#">
            <p><label for="name">Name</label> <input type="text" id="name" /></p>
            <p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /></p>
            <p class="submit"><input type="submit" value="Submit" /></p>
        </form> 
    </body>
</html>

Выглядит хорошо для меня, сохраните его в формате .html и убедитесь сами.

1 голос
/ 26 июля 2010

Использовать список определения или пробел в настоящее время.

0 голосов
/ 26 июля 2010

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

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

0 голосов
/ 26 июля 2010

Заполнение с &nbsp; s звучит грязно.Как насчет чего-то вроде этого: 

<span class="header">To:</span> 07/02/2010
<span class="header">From:</span> 07/02/2010

.header { display: inline-block; width: 5em;}

В этом случае я бы даже сказал, что таблицы подходят;это выглядит как табличные данные со столбцом заголовков.

...