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的绝佳方法.列表具有语义意义,对搜索机器人和屏幕阅读器更友好.

有一篇关于驯服名单的优秀文章.

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