把標籤和文本框放在屏幕的右側CSS

Question

我有一個HTML頁面上的文本框和標籤的問題。我需要將兩個文本框和兩個標籤放在頁面的正確大小上，但我不能。我嘗試使用一些來自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); 
} 

而且我也把我的HTML代碼，只有在這裏我想提出一個TextView，並在屏幕的右邊的標籤：

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

我想在屏幕右側的另外兩行的同一行添加一個textview和label。

任何人都可以幫助我嗎？非常感謝！

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> 

現在你可以使用CSS來把它們放在一起像這樣：

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

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

然後你可以混合物和測試的東西我nside，就像對齊等。希望這會讓你開始進行！