ログイン画面1行でパスワードを確認する

HTML/CSS全体の内容が新しくなりました。私が学んだことのほとんどは、ここから来たものか、私が持っているグーグルな質問です。私は同じ行に2つのラベルの単語を印刷する方法を理解できないようです。 https://i.stack.imgur.com/TRdxs.png ログイン画面1行でパスワードを確認する

[<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
body {background-color: black;} 
div {} 
label {display:inline-block;width:235px;margin-left: 20px; margin-top: 20px; font-size: 25px; font-family: Calibre; color: white; text-align: left;} 
input {margin-top: 20px; margin-right: 20px;padding: 12px 20px;} 
#main {border: 5px solid white; width: 600px; height: 400px;} 
button {margin-left: 320px; margin-top: 20px; margin-bottom: 20px; background-color:#00BB00; width:120px; height: 40px; 
color: white; 
font-size: 20px; 
border-radius: 46px; 
-moz-border-radius: 46px; 
-webkit-border-radius: 46px; 
border: 0px solid #800000; 
font-family: Calibre} 
</style> 
</head> 
<body> 
<div id="main"> 
<form action="/web.engineering" method="post"> 
    <div> 
    <label>Username:</label> 
    <input type="text"placeholder="Username" name="username" required> 
    </div> 
    <div> 
    <label>First name:</label> 
    <input type="text" placeholder="First name" name="firstname" required> 
    </div> 
    <div> 
    <label>Last name:</label> 
    <input type="text" placeholder="Last name" name="lastname" required> 
    </div> 
    <div> 
    <label>Password:</label> 
    <input type="password" placeholder="Enter password" name="password" required> 
    </div> 
    <div> 
    <label>Passwordconfirmation:</label> 
    <input type="password" placeholder="Re-enter password" name="Repeat password" required> 
    </div> 
    <div> 
    <button type="submit" ><b>Register</b></button> 
    </div> 
</form> 

</div> 

</body> 
</html>][1]

だから、これは私が持っているもので、絵は、私はあなたがどのようにテキストボックスの前に同じ行にパスワードの確認を印刷する方法を教えてくださいget.Canしなければならないものです。ありがとうございます

出典

2017-10-14 Симеон Пецанов

期待される出力のイメージを提供できますか？何が問題なのかを説明してください。 –

display：inline-blockプロパティを持つ#main divを試してください。 –

は、まず、2つ目は、これは動作しますdisplay: flex;とflex-basis: 230px;

body { 
 
    background-color: black; 
 
} 
 

 
div {} 
 

 
#main form>div { 
 
    display: flex; 
 
} 
 

 
label { 
 
    flex-basis: 230px; 
 
    margin-left: 20px; 
 
    margin-top: 20px; 
 
    font-size: 23px; 
 
    font-family: Calibre; 
 
    color: white; 
 
    text-align: left; 
 
} 
 

 
input { 
 
    margin-top: 20px; 
 
    margin-right: 20px; 
 
    padding: 12px 20px; 
 
} 
 

 
#main { 
 
    border: 5px solid white; 
 
    width: 600px; 
 
    height: 400px; 
 
} 
 

 
button { 
 
    margin-left: 320px; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    background-color: #00BB00; 
 
    width: 120px; 
 
    height: 40px; 
 
    color: white; 
 
    font-size: 20px; 
 
    border-radius: 46px; 
 
    -moz-border-radius: 46px; 
 
    -webkit-border-radius: 46px; 
 
    border: 0px solid #800000; 
 
    font-family: Calibre 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    <style> 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="main"> 
 
    <form action="/web.engineering" method="post"> 
 
     <div> 
 
     <label>Username:</label> 
 
     <input type="text" placeholder="Username" name="username" required> 
 
     </div> 
 
     <div> 
 
     <label>First name:</label> 
 
     <input type="text" placeholder="First name" name="firstname" required> 
 
     </div> 
 
     <div> 
 
     <label>Last name:</label> 
 
     <input type="text" placeholder="Last name" name="lastname" required> 
 
     </div> 
 
     <div> 
 
     <label>Password:</label> 
 
     <input type="password" placeholder="Enter password" name="password" required> 
 
     </div> 
 
     <div> 
 
     <label>Password confirmation:</label> 
 
     <input type="password" placeholder="Re-enter password" name="Repeat password" required> 
 
     </div> 
 
     <div> 
 
     <button type="submit"><b>Register</b></button> 
 
     </div> 
 
    </form> 
 

 
    </div> 
 

 
</body> 
 

 
</html>]

希望を使用しているスペース・コンテナーのdivに応じてフォントサイズを与えます！

出典

2017-10-14 11:38:21

ありがとうございました^^ –

@СимеонПецанов - あなたの歓迎、私に投票をお願いします:) –

私は15未満の評判を持っていますが、投票は記録されていますが、私はあなたが得なければならない評判あなたの投票:(それについて申し訳ありません –

ラベルの幅をラベルのフォントサイズより大きくまたは小さくします。あなたは固定幅を持っているので、両方の単語はそのフォントサイズで235pxの幅に適合しません。私は同じ行に240pxの幅で表示しようとしましたが、24pxのフォントサイズでは同じ行にあります。

出典

2017-10-14 10:37:42 Morphy

ログイン画面1行でパスワードを確認する

答えて

関連する問題