Question

我正在尝试编写联系表单，但我的标签宽度并未在Firefox或Chrome中强制使用 - IE似乎工作正常（一次）。这是我的HTML

 <form name="" id="" action="" method="post">

            <div id="my_form">

                <div>
                    <label for="username">Username:</label>
                    <input type="text" name="username" id="username" />
                </div>
            <div>
<form>

这是我的CSS

#my_form div label{width:200px;display:inline-block;}

任何想法如何强制标签宽度，它们似乎崩溃

Answer 1

试试这个：

#my_form div label{width:200px; display:block; float:left;}

看到这个运行（http://jsfiddle.net/jrpab/），它在Chrome中运行良好。

Answer 2

尝试：

#my_form label{width:200px;display:block; clear:left; float:left; }
#my_form input{display:block; float:left; width:auto;}

Answer 3

  经过一番头疼和研究，我发现它是因为   标签是内联元素，根据CSS文档   应该忽略宽度样式。因此，像往常一样，IE做错了   Chrome和Firefox正在做得很好。

...

将其display属性设置为内联以外的其他属性。我发现 display：inline-block 是实现您的最佳目标的最佳选择。

http://doctype.com/firefox-chrome-ignore-widths-my-labels

IE为什么要尊重标签CSS宽度，而不是Firefox或Chrome？

3 个答案: