我需要有关对齐文本框的帮助

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

你在找这样的东西吗？

＆＃13;

＆＃13;

*{
    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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>