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>

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

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

了解如何有效地使用列表是一个黑客和某个专业人士之间的区别。了解这一点。