Question

我无法正确格式化CSS以便以我想要的方式在IE中显示。它完美地出现在Firefox中。我试图让它显示标签，然后在它旁边有输入或选择框对齐和所有相同的大小，使它看起来均匀。我知道IE有黑客攻击，但似乎没有任何改变。我在Firefox中使用的示例CSS和html代码如下所示。任何帮助都会很棒谢谢！

* CSS

fieldset {
    border: none;
    padding: 10px;
    width: 600px;
    margin-top: 5px;
}

label {
    width: 140px; 
    padding-left: 20px;
    margin: 5px;
    float: left;
    text-align: left;
}

input {
    margin: 5px;
    padding 0px;
    float: left;
    vertical-align: middle;
    display: inline;
}

select {
    margin: 1px 0px;
    padding: 2px;
    float: left;
    display: inline;
    width: 149px;
}

br {
    clear: left;
}

* HTML

<fieldset>
    <label>First Name:</lable>
    <input type="text" value="first_name" /><br >

    <label>Last Name:</lable>
    <input type="text" value="last_name" /><br >       

    <label>User Role:</lable>
    <select>
        <option value=""></option>
        <option value="admin">Admin</option>
        <option value="basic">Basic</option>
    </select>
 </fieldset>

Answer 1

修复标签代码，然后尝试使用此css代码：

fieldset {
        border: none;
        padding: 10px;
        width: 600px;
        margin-top: 5px;
    }

    label {
        width: 140px; 
        margin: 5px;
        display: block;
        float: left;
    }

    input, select {
        width: 150px;
        margin: 5px;
        float: left;
        display: block;
    }

    br {
        clear: both;
    }

它适用于IE，FF，Chrome和Safari。此外，您可能希望尝试使用ordered lists设置表单元素的样式。

IE CSS格式无表格形式，带有标签，输入和选择

1 个答案: