Question

我在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>

Answer 1

删除clear：left并向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>

IE7定义列表 - 对齐问题

1 个答案: