-4

我有一些类似下面的代码：

<form>
    <fieldset>
        <legend>Form Title</legend>
        <legend>Text Box 1</legend>
            <input type="text"/>
        <legend>Text Box 2</legend>
            <input type="text"/>
        <legend>Text Box 3</legend>
            <input type="text"/>
        <input type="submit"/>
    </fieldset>
</form>

没关系，上面的片段是不完整的，它将作为我的问题的一个例子。

显示页面时，大约一半的时间加载为下图的左侧位，而其余时间则按预期加载，如右侧位。

html显示位

为什么是这样？我知道<legend>这里使用不当，我打算用<label>标签替换它们。我正在逐渐改掉大学里教给我的所有错误，但旧习惯很难改掉。这可能是问题吗？

出现时页面的源代码彼此相同。

4

1 回答 1

1

正如我的评论中提到的，不要那样使用<legend>。这不是它的用途，它是错误的，如果它渲染正确，那纯粹是偶然的。

请参阅此 Fiddle以获得正确的实现。

HTML：

<form>
    <fieldset>
        <legend>Send Support Inquiry</legend>
        <label for="name">Name</label>
        <input type="text" name="name" id="name"/>
        <label for="email">Email</label>
        <input type="text" name="email" id="email"/>
        <label for="message">Message</label>
        <textarea rows="8" cols="30" name="message" id="message"></textarea>
        <input type="submit" value="Submit" />
    </fieldset>
</form>

CSS：

label, input, textarea
{
    float: left;    
    clear: both;
}
于 2013-10-01T17:40:01.967 回答