Блог

Главная - Вопросы по программированию - Список определений IE7 — проблема с выравниванием

Список определений IE7 — проблема с выравниванием

#css #list #internet-explorer-7 #internet-explorer-6 #definition

#css #Список #internet-explorer-7 #internet-explorer-6 #определение

Вопрос:

У меня возникла проблема с выравниванием этого списка определений в Internet Explorer 7 (также Internet Explorer 5.5 и 6, но я буду рад, если смогу заставить его работать в ie7.)

Скриншот:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        .details dt {
            clear: left;
            float: left;
            width:100px;
            margin: 0;
            font-family:verdana;
            font-size:10px;
            font-weight: bold;
        }
        .details dd {
            float: left;
            margin: 0;
            font-family:verdana;
            font-size:10px;
        }
    </style>
</head>
<body>
    <dl class="details">
        <dt>Country:</dt>
        <dd>Canada</dd>

        <dt>State:</dt>
        <dd>Alberta</dd>
        <dt>City:</dt>
        <dd>Calgary</dd>
        <dt>District:</dt>
        <dd>Downtown</dd>

        <dt>Street:</dt>
        <dd>Main St</dd>
    </dl>
</body>
</html>

Комментарии:

1. table Будет лучше, если вам нужна совместимость с IE6 / 7, не полагаясь на хакерство. Просто используйте <table><tr><th scope="row">Country:</th><td>Canada</td></tr> и так далее.

Ответ №1:

Удалите очистить: слева и добавьте ширину к dl. рабочий пример:

http://jsfiddle.net/sFxcE/1/

код: 

 <head>
            <style type="text/css">
            .details dt {

            float: left;
            width:100px;
            margin: 0;
            font-family:verdana;
            font-size:10px;
            font-weight: bold;
            }

            .details dd {
            float: left;
            margin: 0;
            font-family:verdana;
            font-size:10px;
            }
            .details
             {
             width:200px;
             }


            </style>


            </head>

            <body>

            <dl class="details">
            <dt>Country:</dt>
            <dd>Canada</dd>

            <dt>State:</dt>
            <dd>Alberta</dd>
            <dt>City:</dt>
            <dd>Calgary</dd>
            <dt>District:</dt>
            <dd>Downtown</dd>

            <dt>Street:</dt>
            <dd>Main St</dd>
            </dl>


            </body>
            </html>