IE 7中的设计问题

时间:2011-02-24 07:37:32

标签: html css internet-explorer-7 html-lists

您好,这是我的 HTML

<div style="width:220px;float:left;" id="radio_text">
    <ul style="width:20px;float:left;display:block;">
        <li style="list-style:none;line-height:13px;height:13px;float:left;"><input type="radio" name="radio_flag" checked="true" /></li>
        <li style="list-style:none;line-height:13px;height:13px;float:left;"><input type="radio" name="radio_flag" /></li>
        <li style="list-style:none;line-height:13px;height:13px;float:left;"><input type="radio" name="radio_flag" /></li>
    </ul>
    <ul style="width:200px;float:left;">
        <li style="list-style:none;line-height:13px;height:13px;width: 200px;float:left;">Show All</li>
        <li style="list-style:none;line-height:13px;height:13px;width: 200px;float:left;">Show Only Members</li>
        <li style="list-style:none;line-height:13px;height:13px;width: 200px;float:left;">Show Only Accepted Contacts</li>
    </ul>
</div>

我的 CSS

#radio_text ul{float:left;}
#radio_text ul li{background: none;border:none;color: #000000;float: left;font-family: Arial,Helvetica,sans-serif;font-size: 11px;font-weight: normal;margin-right: 2px;padding: 1px 7px;text-align: left;}

和我的输出

enter image description here

请帮我在 IE 7

中正确显示

感谢

1 个答案:

答案 0 :(得分:2)

我不知道您编程的具体情况,为什么不将 HTML 更改为:

<div style="width:220px;float:left;" id="radio_text">
    <ul style="float:left;display:block;">
        <li style="list-style:none;line-height:13px;height:13px;">
            <input type="radio" name="radio_flag" checked="true" />
            <span class="radio-text">Show All</span>
        </li>
        <li style="list-style:none;line-height:13px;height:13px;">
            <input type="radio" name="radio_flag" />
            <span class="radio-text">Show Only Members</span>
        </li>
        <li style="list-style:none;line-height:13px;height:13px;">
            <input type="radio" name="radio_flag" />
            <span class="radio-text">Show Only Accepted Contacts</span>
        </li>
    </ul>
</div>

这样,文本会自动显示在单选按钮旁边。您还可以在单​​选按钮和范围周围包装&lt; label&gt; 标记,以便在用户点击文本时检查单选按钮。

<label><input type="radio" name="rbtn"/><span>text</span></label>

我同意,最好将所有样式属性放在外部样式表中。