Question

试图使输入框与它们的文本对齐，第二个输入框将放置一行并在float：right打开时将所有内容都丢弃。我想知道为什么它会跳过一行以及如何解决。谢谢。

尝试重新排列，尝试了clearfix。

<section>
    <h1>&nbsp</h1>
    <div id="controls" class="controls">
        <form id="add-book-form">
            Title:
            <input type="text" name="title" required /><br>
            Author:
            <input type="text" name="author" required /><br>
            Pages:
            <input type="text" name="pages" type="number" required /><br>
            Read:
            <input type="checkbox" name="read" /><br>
            <input type="submit" id="add-book-btn" value="Add"> <button onclick="hideForm()">nvm</button>
        </form>
        <button onclick="addBookForm()">Add Book</button>
    </div>
</section>

Answer 1

您有几个问题。

首先，您在输入字段上浮动，并留下标签来确定要做什么。第一个标签以ok结尾，第二个标签中断了流程，因为它与输入字段位于同一行，因为文本行高小于输入字段的高度。但是输入字段与其标签不在同一行。

第二，您使用<br>进行中断，而不是将所有内容包装在某种类型的block元素中。

第三，您根本没有使用label标签。

因此，要解决此问题：

添加标签（以及标签中的for属性）
浮动标签向左，右侧输入。
在每个标签/输入对周围添加div并为其添加clearfix。
总共丢掉<br>。

<input>框继续浮动到下一行：right

1 个答案: