html - 如何对齐这些输入文本字段

Question

我尝试将 float: 放在文本框(输入文本)的右侧，它正确地对齐了文本框，但我的文本未对齐，添加书籍按钮也是如此。我该如何解决？谢谢。

<div id="add_div">
    <form method="POST" action="add.php">
        <!--start of form -->
        <label>Enter Author Name</label>
        <input type="text" name="author">
        <br />
        <label>Enter Book Title</label>
        <input type="text" name="title">
        <br />
        <label>Enter Year Levels</label>
        <input type="text" name="yrLevel">
        <br />
        <label>Enter ISBN</label>
        <input type="text" name="isbn">
        <br />
        <label></label>
        <input type="submit" name="add" value="Add Book">
        <br />
    </form>
    <!-- end of form -->
</div>

下面是我的 CSS

#add_div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input {
    display:inline-block;
    margin: 1px;
}

Answer 1

一个简单的解决方案是将显示更改为内联 block 而不是 float :

label, input {
    display:inline-block;
    width:150px;
}

<div id="add_div">
    <form method="POST" action="add.php">
        <!--start of form -->
        <label>Enter Author Name</label>
        <input type="text" name="author">
        <br />
        <label>Enter Book Title</label>
        <input type="text" name="title">
        <br />
        <label>Enter Year Levels</label>
        <input type="text" name="yrLevel">
        <br />
        <label>Enter ISBN</label>
        <input type="text" name="isbn">
        <br />
        <label></label>
        <input type="submit" name="add" value="Add Book">
        <br />
    </form>
    <!-- end of form -->
</div>