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

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

一个简单的解决方案是将显示更改为内联块而不是浮动：

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>

Answer 2

您可以将所有内容添加到表格并设置border =“0”，以便您无法看到它。这将使所有内容保持在一起，因为所有内容都属于表元素。

请参阅此处的小提琴：https://jsfiddle.net/2Lzo9vfc/100/

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

    <div id="add_div">
<form method="POST" action="add.php"> <!--start of form -->
    <table padding="1" border="0">
        <tr>
            <td>
                <label> Enter Author Name</label>
            </td>
            <td>
                <input type="text" name="author">
            </td>
        </tr>
        <tr>
            <td>
                <label> Enter Book Title </label> 
            </td>
            <td>
                <input type="text" name="title"> 
            </td>
        </tr>
        <tr>
            <td>
                <label> Enter Year Levels </label>
            </td>
            <td>
                <input type="text" name="yrLevel">
            </td>
        </tr>
        <tr>
            <td>
                <label> Enter ISBN </label>
            </td>
            <td>
                 <input type="text" name="isbn">
            </td>
        </tr>
            <tr>
            <td>
                &nbsp
            </td>
            <td align="right">
                <input type = "submit" name="add" value="Add Book">
            </td>
        </tr>
    </table>  <br/>
</form> <!-- end of form -->
</div>

Answer 3

这可能会有所帮助 -

input {
        display:inline-block;
        *display: inline;     /* for IE7*/
        zoom:1;              /* for IE7*/
        vertical-align:middle;
    }

label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    text-align: left;
}