使用 css 在一行中显示标签和输入答案

【问题标题】：Displaying both Label and Inputs in one line using css使用 css 在一行中显示标签和输入
【发布时间】：2018-12-23 08:46:03
【问题描述】：

我想在以下表单中使用 CSS 在同一行中显示标签和输入。我尝试使用 display、float 和 clear 但无法获得我正在编码的“外观”。

表单应该像这样form

<header>
  <title> Registration form </title>
  <link rel="stylesheet" type="text/css" href="style.css">
</header>


<h2>Register here please ! </h2>

<form id="simpleform">
  <fieldset>
    <label for="name">Full Name </label>
    <input type="text" name="name" id="name">

    <label for="age">Age in Years </label>
    <input type="number" name="age" id="age">

    <label for="email">Email ID</label>
    <input type="email" name="email" id="email">

    <label for="email">Email ID</label>
    <input type="email" name="email" id="email">

    <label for="gender">Gender</label>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="Female">Female<br>

    <label for="hobbies">Hobbies</label>
    <input type="checkbox" name="hobbies" value="Reading"> Reading Books
    <input type="checkbox" name="hobbies" value="movies"> Watching Movies
    <input type="checkbox" name="hobbies" value="Singing"> Singing

    <label for="country">Country</label>
    <select name="country">
      <option value="us">United States</option>
      <option value="India">India</option>
    </select>
    <br>

    <lable for="comments">Comments</lable>
    <textarea name="comments" id="comments" rows=5 cols="50"></textarea>

    <input type="submit">
    <input type="reset" value="Start Again">
  </fieldset>
</form>

【问题讨论】：

请同时发布您的 CSS，并考虑将您的图片内联而不是作为链接 - 这样可以让其他人更容易阅读您的问题。谢谢！

标签： html css forms user-interface

【解决方案1】：

我重新处理了我的 html 和 css 并得到了想要的结果

*{
    margin: 0;
    padding: 0;
}

body{
    font-family:verdana sans-serif;
    background-color: #99ffcc;
}


h2{
    margin-top: 100px;
    text-align: center;
    color: blue;
    
}

#simpleform{
    width: 500px;
    margin: auto;
    height: 400px;
    border: 1px solid red;
    background-color: #ccc;
    
    
}

label{
    text-align: right;
    clear: left;
    float: left;
    padding-right:13px;
    margin-top: 12px;
    width: 150px;
    
}


input,textarea {
   margin-top: 12px;
   width: auto;
    
}

input[type="email"]{
    margin-top:16px;}
    
input[type="radio"]{
    margin-top: 16px;
}

input[type="checkbox"]{
    margin-top: 16px;
}

input[type="number"]{
    margin-top:16px;
}
select{
    margin-top: 13px;
}

#buttons{
    margin-left:160px;
}

input[type="submit"]{
    margin-right:80px;
    background-color: white;
    padding: 10px;
    border-radius:10px;
    border: 1px solid black;
}

input[type="reset"]{
    margin-right:80px;
    background-color: white;
    padding: 10px;
    border-radius:10px;
    border: 1px solid black;}


input[type="submit"]:hover
{
  background-color: aquamarine;  
}

input[type="reset"]:hover
{
  background-color: aquamarine;  
}

input[type="text"],input[type="number"],input[type="email"]{
    width:200px;
    border: 1px solid black;
}

<html>
    <header><title> Registration form </title>
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </header>
      
    <body>
    <h2>Register here please ! </h2>
        
        <form id="simpleform">
            
            
            <div>
            <label for="name">Full Name </label>
            <input type="text" name="name" id="name">
            </div>
                
            <div>
            <label for="age">Age in Years </label>
            <input type="number" name="age" id="age">
            </div>
            
            <div>
            <label for="email">Email ID</label>
            <input type="email" name="email" id="email">
            </div>
                
                
            <div>
            <label for="gender">Gender</label>
            <input type="radio" name="gender" value="male"> Male
            <input type="radio" name="gender" value="Female">Female<br>
            </div>
            
            <div>
            <label for="hobbies">Hobbies</label>
            <input type="checkbox" name="hobbies" value="Reading"> Reading Books
            <input type="checkbox" name="hobbies" value="movies"> Watching Movies
            <input type="checkbox" name="hobbies" value="Singing"> Singing
            </div>
            
            <div>
            <label for="country">Country</label>
            <select name="country">
            <option value="us">United States</option>
            <option value="India">India</option>
            </select><br>
            </div>
            
            <div>
            <label for="comments" id="lable-comment">Comments</label>
            <textarea name="comments" id="comments" rows=5 cols="50"></textarea>
            </div>
            
            <div id="buttons">
            <input type="submit">
            <input type="reset" value="Start Again"></div>
            
        </form>
    
    </body>
    




</html>

【讨论】：

【解决方案2】：

有很多方法可以获得 2 列布局，但使用 table 可能是最简单直接的示例：

    <form id="simpleform">
        <fieldset>
        <table>
          <tr>
            <td><label for="name">Full Name</label></td>
            <td><input type="text" name="name" id="name"></td>
          </tr>
          <tr>
            <td><label for="age">Age in Years</label></td>
            <td><input type="number" name="age" id="age"></td>
          </tr>
          <tr>
            <td><label for="email">Email ID</label></td>
            <td><input type="email" name="email" id="email"></td>
          </tr>
          <tr>
            <td><label for="gender">Gender</label></td>
            <td>
              <input type="radio" name="gender" value="male"> Male
              <input type="radio" name="gender" value="Female">Female
            </td>
          </tr>
          <tr>
            <td><label for="hobbies">Hobbies</label></td>
            <td>
              <input type="checkbox" name="hobbies" value="Reading"> Reading Books
              <input type="checkbox" name="hobbies" value="movies"> Watching Movies
              <input type="checkbox" name="hobbies" value="Singing"> Singing
            </td>
          </tr>
          <tr>
            <td><label for="country">Country</label></td>
            <td>
              <select name="country">
                <option value="us">United States</option>
                <option value="India">India</option>
              </select>
            </td>
          </tr>
          <tr>
            <td><lable for="comments">Comments</lable></td>
            <td>
              <textarea name="comments" id="comments" rows=5 cols="50"></textarea>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <input type="submit">
              <input type="reset" value="Start Again">
            </td>
          </tr>
        </table>
        </fieldset>
    </form>

【讨论】：

明白，但整个想法也是使用 css 样式。