Стилизация dl и dt с помощью CSS для имитации табличного представления - PullRequest
Новая
       5

Стилизация dl и dt с помощью CSS для имитации табличного представления

9 голосов
/ 08 марта 2012

У меня следующие проблемы с использованием CSS для стилизации некоторых элементов dl и dt. Я предпочитаю всегда использовать очень простой CSS, который совместим с IE6 / IE7 и современными браузерами. Я пытаюсь получить эффект, который для меня должен быть довольно простым.

Вот урезанная версия исходного исходного кода, с которым я работаю, чтобы попытаться решить только эту проблему: 

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>

        <style type="text/css">

        .terms dl {
            float: left;
            padding-left: 0px;  
        }

        .terms dt, .terms dd {
            text-align: center;
            margin: 0px;
            float: left;
        }

        .terms dt {

            border: solid blue 1px;
            clear: left;    
        }

        .terms dd {
            border: solid red 1px;
            margin-right: 40px;
            margin-left: 40px;
        }

        </style>
    </head>
    <body>
        <div class="terms">
            <h1>Terms</h1>
            <dl>
                <dt>Term 1:</dt>
                <dd>Very Long definition for this term here</dd>

                <dt>Term 2:</dt>
                <dd>Definition for term</dd>

                <dt>Term 3 with longer term title:</dt>
                <dd>Definition for term</dd>

                <dt>Term 4:</dt>
                <dd>Definition for term</dd>

                <dt>Term 5:</dt>
                <dd>Definition for term</dd>

                <dt>Term 6:</dt>
                <dd>Definition for term</dd>
            </dl>
            <dl>
                <dt>Term 7:</dt>
                <dd>Defintion for term</dd>

                <dt>Term 8:</dt>
                <dd>Definition for term</dd>

                <dt>Term 9:</dt>
                <dd>Definition for term</dd>

                <dt>Term 10:</dt>
                <dd>Very Long definition for this term here</dd>

                <dt>Term 11:</dt>
                <dd>Definition for term</dd>

                <dt>Term 12:</dt>
                <dd>Definition for term</dd>
            </dl>
        </div>
    </body>
</html>

Вот визуальный результат. Я нарисовал синие и красные границы, чтобы их было легче визуализировать:

enter image description here

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

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

Я могу отредактировать ответ, добавив больше картинок и примеров, если мне неясно.

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

enter image description here

UPDATE

Кажется, что нет решения, которое бы не включало в себя задание фиксированной ширины для элементов (и / или инкапсулирующего элемента). Кроме того, кажется, что изменение размера текста в IE6 может быть решено только путем жесткого задания размера текста в пикселях и просто не позволяя им изменять его размер.

Ответы [ 4 ]

8 голосов
/ 08 марта 2012

A DL список и правильно размеченная таблица с двумя столбцами на самом деле довольно эквивалентны в отношении семантики. Таким образом, вы можете безопасно использовать таблицы здесь (обратите внимание на элементы TH с атрибутами scope): 

<table>
    <tr>
        <th scope="row">Term 1:</th>
        <td>Very Long definition for this term here<td>
    </tr>
    <tr>
        <th scope="row">Term 2:</th>
        <td>Definition for term<td>
    </tr>
    <tr>
        <th scope="row">Term 3 with longer term title:</th>
        <td>Definition for term<td>
    </tr>
    <!-- ... -->
</table>

Если предпочтительным является использование DL, рассмотрите возможность использования неупорядоченного списка с каждым элементом, содержащим отдельный DL с ровно одной группой DT / DD внутри. См. Также мой ответ на вопрос «Есть ли правильный способ обернуть dt и dd элементом HTML?».

2 голосов
/ 14 июня 2012

Была похожая проблема, и вот решение, но оно в значительной степени зависит от каждой пары DT-DD, подходящей только на 1 строке, поэтому она может быть хрупкой для ваших целей:

Общая стратегия здесь - вы хотите, чтобы DL был встроенным блоком, а DT были блоками, чтобы они автоматически имели одинаковую ширину. Это также позволяет вам выровнять по правому краю все DT, если это соответствует вашему стилю, и вы контролируете расстояние между элементами из DT. 

dl {
  line-height: 2;
  display: inline-block;
  position: relative;
}

dt {
  text-align: right;
  margin-right: 1em;
}

Теперь вам нужно расположить DD справа от DT, что и делает этот хрупким, потому что DD не могут хорошо адаптироваться к изменяющемуся контенту. 

dd {
  position: absolute;
  left: 100%;
  margin-top: -2em; /* negate the DL line-height */
  white-space: nowrap; /* without this, DDs will be the same length as DTs
}

Обратите внимание, что установка ограничений ширины на DL будет управлять вашими DT, а размер ваших DD определяется на основе ваших DT.

1 голос
/ 08 марта 2012

Вы можете просто указать фиксированную ширину: XXpx для каждого из элементов, подобных этому

http://jsfiddle.net/XKaKT/1/

1 голос
/ 08 марта 2012

Для решения проблемы изменения размера окна просто добавьте ширину к разделу ".terms": 

.terms{
   width:1000px;
 }
...