如何對齊這些輸入文本字段

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”以便看不到它。 這將使所有內容保持在一起，因為所有內容都屬於table元素。

在這里看到小提琴： 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;
}