IE7 浮动单选按钮问题

Question

我为这个网站制作的注册表单在 IE7 中出现问题，它只会在底部出现问题，并且只会出现在 IE7 中。有问题的页面是这个：

https://www.iptlock.com/createaccount.php

此页面底部的单选按钮以相反的顺序显示。我让它们像这样在 CSS 中设置，但这不是它们的显示方式。任何想法为什么？

    #packagechoice{
        width:20px;
        position:relative;
        margin-left:190px;
        margin-top:15px;
        float:left;
    }

    #packagechoice2{
        width:20px;
        position:relative;
        margin-left:190px;
        margin-top:15px;
        float:left;
    }
    #packagechoice3{
        width:20px;
        position:relative;
        margin-top:15px;
        float:left;
}

Answer 1

当使用float:left 时，最左边的项目需要首先出现在您的 HTML 中。您的 HTML 顺序相反。

编辑：

HTML 的问题在于单选按钮和包是单独的行项目。它们在 HTML 中显得很遥远。您的代码也患有 DIV-itis。它缺乏语义结构，这就是为什么事情没有按照您期望的方式进行合作。

考虑一下：

<style>
.packages ul, .packages li {
    list-style:none;
    padding:0;
    margin:0;
}

.packages li {
   float:left;
}

.clear {
    clear:both;
}
</style>

<div class='packages'>
    <ul>
        <li>
             --- your package ---
             --- your radio button ---
        <li>
        <li>
             --- your package ---
             --- your radio button ---
        <li>
        <li>
             --- your package ---
             --- your radio button ---
        <li>
   </ul>
   <div class="clear"></div>
</div>

组合在一起的东西就是列表。 HTML中已经有一个列表标签：UL或OL，正确使用它很重要，并且是消除DIV-itis的好方法。列表具有语义意义，并​​且对搜索机器人和屏幕阅读器更友好。

taming lists上有一篇很棒的文章。

了解如何有效地使用列表是高手和高手之间的区别。去学习这个。