画面の右側にラベルとテキストボックスを置くCSS

Question

htmlページのテキストボックスとラベルに問題があります。 2つのテキストボックスと2つのラベルをページの適切なサイズに配置する必要がありますが、できません。私はstackoverflowからいくつかの答えを試しても、それも動作しません、それは常に最初のテキストボックスとラベルからテキストボックスとラベルを置く。

私は私のCSSコード置く：

@import 'https://fonts.googleapis.com/css?family=Open+Sans'; 

body { 
    font-family: 'Open Sans', sans-serif; 
    padding: 0; 
    margin: 0 auto 0 auto; 
    vertical-align: middle; 
    float: center; 
    max-width: 70em; 
} 

a { 
    color: #ff6f00; 
    text-decoration: none; 
} 

a:hover { 
    text-decoration: underline; 
} 

.card, header, nav, article { 
    margin: 1em .5em; 
    border-radius: .25em; 
    box-shadow: 0 .25em .5em rgba(0, 0, 0, .4); 
    overflow: hidden; 
} 

header { 
    text-align: center; 
    background-color: #3f51b5; 
    color: white; 
    margin-top: 0; 
    margin-bottom: 0; 
    padding: .25em; 
    border-radius: 0 0 .25em .25em; 
} 

main { 
    width: auto; 
    overflow: hidden; 
    margin-bottom: 5em; 
} 

footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: #3f51b5; 
    color: white; 
    text-align: center; 
    box-shadow: 0 -.125em .5em rgba(0, 0, 0, .4); 
} 

footer a { 
    color: #ffd740; 
} 

nav { 
    float: left; 
    width: 20em; 
    background-color: #eee; 
} 

nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

nav li a { 
    display: block; 
    color: black; 
    padding: .5em 1em; 
    transition: background-color .25s; 
} 

nav li a:hover { 
    background-color: #ffc107; 
    text-decoration: none; 
    transition: background-color .25s; 
} 

article { 
    background-color: #eeeeee; 
    padding: .5em; 
} 

article h1 { 
    border-bottom: 1px solid rgba(0, 0, 0, .4); 
} 

article img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    box-shadow: 0 .25em .5em rgba(0, 0, 0, .4); 
    transition: box-shadow .25s; 
} 

article img:hover { 
    box-shadow: 0 .3em 1em rgba(0, 0, 0, .4); 
    transition: box-shadow .25s; 
} 

hr { 
    border-style: none; 
    background-color: rgba(0, 0, 0, .4); 
    height: 1px; 
} 

pre { 
    overflow: auto; 
} 

@media only screen and (max-width: 45em) { 
    body { 
     min-height: calc(100vh); 
     display: flex; 
     flex-direction: column; 
    } 

    nav { 
     float: none; 
     width: auto; 
    } 

    main { 
     flex-grow: 2; 
     margin-bottom: .25em; 
    } 

    footer { 
     position: relative; 
     padding: .25em; 
     width: auto; 
    } 
} 

/* Forms */ 

input[type=button], input[type=submit] { 
    background-color: white; 
    padding: .5em; 
    border: 0; 
    box-shadow: 0 .25em .5em rgba(0, 0, 0, .4); 
    border-radius: .25em; 
    transition: box-shadow .125s; 
} 

input[type=button]:hover, input[type=submit]:hover { 
    box-shadow: 0 .3em 1em rgba(0, 0, 0, .4); 
    transition: box-shadow .125s; 
} 

input[type=button]:active, input[type=submit]:active { 
    box-shadow: 0 .0625em .25em rgba(0, 0, 0, .4); 
    transition: box-shadow .0625s; 
} 

input[type=text], input[type=number], input[type=password], select { 
    width: 10em; 
    background-color: white; 
    padding: .5em; 
    border: 0; 
    box-shadow: inset 0 .0625em .25em rgba(0, 0, 0, .4); 
    border-radius: .25em; 
    transition: box-shadow .25s, width .4s ease-in-out; 
} 

input[type=text]:hover, input[type=number]:hover, input[type=password]:hover, select:hover { 
    box-shadow: inset 0 .0625em .5em rgba(0, 0, 0, .4); 
    transition: box-shadow .25s, width .4s ease-in-out; 
} 

input[type=text]:focus, input[type=number]:focus, input[type=password]:focus { 
    box-shadow: inset 0 .0625em .375em rgba(0, 0, 0, .4); 
    width: 20em; 
    transition: box-shadow .25s, width .4s ease-in-out; 
} 

input[type=text]:disabled, input[type=number]:disabled, input[type=password]:disabled, select:disabled { 
    background-color: #eee; 
} 

input[type=radio], input[type=checkbox] { 
    box-shadow: 0 .25em .5em rgba(0, 0, 0, .4); 
    border-radius: .5em; 
} 

input[type=radio]:active, input[type=checkbox]:active { 
    box-shadow: 0 .0625em .25em rgba(0, 0, 0, .4); 
} 

input[type=radio]:disabled, input[type=checkbox]:disabled { 
    background-color: #eee; 
    box-shadow: 0 .0625em .25em rgba(0, 0, 0, .4); 
} 

をし、また、私は、画面の右側にのTextViewとラベルを入れたい場合にのみ、私のhtmlコードを置く：

<html> 
    <head> 
     <title>TEST</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" type="text/css" href="/main-style.css"> 
    </head> 
    <body> 
     <header> 
      <p>TEST</p> 
     </header> 
     <main> 
      <article> 
       <h1>Insert</h1> 
       <form action="index.php" method="get"> 
        <p>Label: <input type="number" name="Label" <?php if ($estadoBD != 0) echo "disabled value=\"$LabelDB\" "; ?>/></p> 
        <p>Textview: <input type="number" name="Textview" <?php if ($estadoBD != 0) echo "disabled value=\"$TextviewDB\" "; ?>/></p> 
        <p><input type="submit" /></p> 
       </form> 
       <?php if($msg) { ?> 
        <p><?php echo $msg; ?></p> 
       <?php } ?> 
       <?php if($msg_estado) { ?> 
        <p><?php echo $msg_estado; ?></p> 
       <?php } ?> 
      </article> 
     </main> 
     <footer> 
      <p>TEST</p> 
     </footer> 
    </body> 
</html> 

他の2つの同じ行で、画面の右側に、もう1つのテキストビューとラベルが必要です。

誰でも助けてくれますか？どうもありがとう！

Answer 1

このようなクラスを持つdivの中にあなたのラベルと入力をラップ：

<div class="label-wrapper"> 
    <label>My left label</label> 
    <input type="text" /> 
</div> 

し、それを貼り付け、それは次のようになりますので、その下にそれを置くコピー：

<div class="label-container"> 
    <div class="label-wrapper"> 
     <label>My left label</label> 
     <input type="text" /> 
    </div> 
    <div class="label-wrapper"> 
     <label>My left label</label> 
     <input type="text" /> 
    </div> 
</div> 

今、あなたを

.label-wrapper { 
    width: 50%; 
    float: left; 
} 

.label-container:after { 
    clear: both; 
    display: block; 
    content: ""; 
} 

のように、CSSを使用して相互に配置することができます右揃えなどのように、nside。これがあなたを進行させることを望みます！