个人中心
gpt4 book ai didi

html - 使用 css 在一行中显示标签和输入

转载 作者：行者123 更新时间：2023-11-28 17:03:26 24 4
gpt4 key购买 nike

我想使用 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>

最佳答案

我重新处理了我的 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>

关于html - 使用 css 在一行中显示标签和输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51351050/

24 4 0
文章推荐： python - 根据条件更改数据框行值的更快方法
文章推荐： html - 在此上下文中，元素 blue 不允许作为元素 div 的子元素。 (抑制来自该子树的更多错误。)
文章推荐： html - 如何使用 CSS 定位单个范围 slider
文章推荐： CSS :not pseudo-class not working as expected in IE9