我需要有關對齊文本框的幫助

Question

我想對齊此注冊表中的所有文本框，以便所有框都在同一垂直線上結束。 我想它很簡單，但是我沒有找到一種方法。 我不能使用表屬性。 它說我需要添加更多詳細信息，但是我不知道要添加什么，所以我只輸入直到錯誤消失。

<div class="bg">
</div> 
<div class="reg">
<h1> Napravite svoj nalog </h1>
<form class="regi" method="post" action="Naslovna.html">
<p> Korisničko ime: <input type="text" size="14"> </p>
<p> Lozinka: <input type="password" size="15"> </p>
<p> Potvrdite lozinku: <input type="password" size="15"> </p>
<p> Vaša e-mail adresa: <input type="text" size="15"> </p>
<p> Potvrdite e-mail adresu: <input type="text" size="15"> </p>
<p> Da li želite da dobijate obaveštenja na e-mail o novostima sa sajta? </p> <br>
<p> <input type="radio" name="obav" value="Da" checked> Da <input type="radio" name="obav" value="Ne"> Ne </p> 
<p> <input type="submit" value="Registrujte  se"> </p>
</div>

CSS代碼：

*{
    margin:0;
    padding:0;
}

body{
    background-image: url("Fotografije/android.jpg");
    height:100%;
    background-attachment:fixed;
    background-repeat:no-repeat;
    color:white;
    font-family:Arial;
    text-shadow: 0px 0px 20px black;

    }
input[type=text] {
    width: 200px;
    margin: 8px 0;
    box-sizing: border-box;

}

input[type=password] {
    width: 200px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=text]:focus,[type=password]:focus{
    border:2px solid #97C026;
}

select {
    width:200px;
    margin:8px 0;
    box-sizing:border-box;
}

select :focus{
    border:2px solid #97C026;
}

input[type=submit]{
    background-color:#97C026;
    border:none;
    color:white;
    padding:12px 20px;
    margin:8px 0;
}


.reg{
    position:absolute;
    margin:0 auto;
    top:30%;
    right:0;
    bottom:0;
    left:0;
    padding-top:30px;
    padding-left:50px;
    background-color:#31577C;
    width:500px;
    height:430px;
    border-radius:10px;
    opacity:.9;
}

Answer 1

您是否正在尋找這樣的東西？

 *{ margin:0; padding:0; } body{ background-image: url("Fotografije/android.jpg"); height:100%; background-attachment:fixed; background-repeat:no-repeat; color:white; font-family:Arial; text-shadow: 0px 0px 20px black; } input[type=text] { width: 200px; margin: 8px 0; box-sizing: border-box; } input[type=password] { width: 200px; margin: 8px 0; box-sizing: border-box; } input[type=text]:focus,[type=password]:focus{ border:2px solid #97C026; } select { width:200px; margin:8px 0; box-sizing:border-box; } select :focus{ border:2px solid #97C026; } input[type=submit]{ background-color:#97C026; border:none; color:white; padding:12px 20px; margin:8px 0; } .reg{ position:absolute; margin:0 auto; top:30%; right:0; bottom:0; left:0; padding-top:30px; padding-left:50px; background-color:#31577C; width:500px; height:430px; border-radius:10px; opacity:.9; } .input-row span, .input-row input { display: inline-block; width: 45%; } 

 <div class="bg"> </div> <div class="reg"> <h1> Napravite svoj nalog </h1> <form class="regi" method="post" action="Naslovna.html"> <div class="input-row"> <p><span> Korisničko ime: </span><input type="text" size="14"> </p> </div> <div class="input-row"> <p><span> Lozinka: </span><input type="text" size="15"> </p> </div> <div class="input-row"> <p><span> Potvrdite lozinku: </span><input type="text" size="15"> </p> </div> <div class="input-row"> <p><span> Vaša e-mail adresa: </span><input type="text" size="15"> </p> </div> <div class="input-row"> <p><span> Potvrdite e-mail adresu: </span><input type="text" size="15"> </p> </div> <p> Da li želite da dobijate obaveštenja na e-mail o novostima sa sajta? </p> <br> <p> <input type="radio" name="obav" value="Da" checked> Da <input type="radio" name="obav" value="Ne"> Ne </p> <p> <input type="submit" value="Registrujte se"> </p> </form> </div> 

Answer 2

您可以將表單用作外部flex容器，並使用flex-direction屬性將該容器分為2列。

 .container { width: 300px; display: flex; flex-direction: row; justify-content: space-around; } .col { display: flex; flex-direction: column; } 

 <div class="container"> <div class="col"> <label for="inputText">Input Text:</label> <label for="inputNumber">Input Number:</label> </div> <div class="col"> <input type="" id="inputText" name=""> <input type="" id="inputNumber" name=""> </div> </div>