个人中心
gpt4 book ai didi

html - 无法对齐标签，在表单中输入

转载 作者：行者123 更新时间：2023-11-28 06:10:42 26 4
gpt4 key购买 nike

您好，我在对齐 html 页面中的标签、输入字段和下拉框时遇到问题。我希望标签在左侧对齐并在其旁边输入。但它到处都是，很难对齐。我希望我的表格看起来像这样

enter image description here

但我的页面目前看起来像这样: enter image description here

下面是我的html和css代码:

<!Doctype html>
<html lang="en-US">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <meta name="description" content="Assignment 3 using Ajax" />

  <!-- Title -->
  <title>Assignment 3</title>

 <!--CSS Styling -->
 <link type="text/css" href="style.css" rel="stylesheet" />

 <!-- script -->
 <script type="text/javascript" src="script.js">
 </script>

</head>

<body>
  <header><h1> Registration </h1></header>
    <form name="myForm" action="#" method="post" onsubmit="return validate()">
        <fieldset>
            <label for="username">Username: </label>
            <input type="text" id="username" name="user" placeholder="Enter username" />

            <label for="password">Password: </label>
            <input type="password" id="password" name="user_p" />

            <progress id="progress" value='0' max="100"></progress><span id="text"></span>

            <label for="re_password">Verify Password: </label>
            <input type="password" id="re_password" name="user_pass" placeholder="Re-enter password" />

            <label for="email">Email: </label>
            <input type="email" id="email" name="user_email" placeholder="Enter email"  />

            <label for="email">Verify Email: </label>
            <input type="email" id="email" name="user_email2" />    

            <label for="question1">Security Question </label>
            <select id="question1" name="question1">
                <option value="none"> --- Select a question --- </option>
                <option value="a">What's your favorite color?</option>
                <option value="b">What's the make of your first car?</option>
                <option value="c">What's your mother's maiden name?</option>
                <option value="d">What city were you born?</option>
                <option value="e">What high school did you attend?</option>
            </select>

            <label for="answer">Security Answer: </label>
            <input type="text" name="user_answer1"  />

            <label for="question2">Security Question </label>
            <select id="question2" name="question2">
                <option value="none"> --- Select a question --- </option>
                <option value="a">What's your favorite color?</option>
                <option value="b">What's the make of your first car?</option>
                <option value="c">What's your mother's maiden name?</option>
                <option value="d">What city were you born?</option>
                <option value="e">What high school did you attend?</option>
            </select>


            <label for="answer2"> Security Answer: </label>
            <input type="text" id="answer2" name="user_answer2" />

            <label for="mobile">Phone: </label>
            <input type="text" id="mobile" name="user_mobile" />

            <label for="address">Address: </label>
            <textarea id="t1" rows="8" cols="40"name="user_address" style="vertical-align: top;"></textarea>

            <label for="interests">Areas you may be interested in, please select one or more: </label>
            <textarea id="interests" rows="10" cols="40" name="user_extra" style="vertical-align: top;"></textarea>

            <div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)">
                <img src="Red_Apple.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="110" height="40" />
            </div>
            <div id="box2"  ondrop="drop(event)" ondragover="allowDrop(event)">
                <img src="Banana.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="110" height="40" />
            </div>

            <div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>            
        </fieldset>

        <input type="button" name="submit" value="Register" onclick="return validate()" />
        <input type="button" value="Clear" />

    </form>

</body>

CSS:

form {
     max-width: 750px;
     margin-left: 50px;
     background: #f4f7f8;
     border-radius: 8px;
    }
label {
     display:block;
     text-align: right;
     width:145px;
     float: left;
     padding-top: 5px;
   }

input {
    display: inline-block;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 20px;
    vertical-align: middle;
   }

fieldset  {
    margin-bottom: 30px;
    border: none;
   }

#box1, #box2 {
    float:right;
    width: 112px;
    height: 42px;
    border: 1px solid;
  }

div#box3{
  width:112px;
  height:42px;
  border: 1px solid;
 }

请指导我如何正确对齐标签和输入，就像第一张图片中那样。

最佳答案

如果将 input 和 label 的每一行都放在包装器 div 中，您可以轻松解决遇到的问题.包装器就像一个全宽包装器，围绕着该行的标签和输入。每个新标签和输入都将进入下一行。

我还对您的 label 样式做了一些调整，因为它需要 display: inline-block; 而不是 float: left; 是必需的。

参见 my JSFiddle demo .

关于html - 无法对齐标签，在表单中输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36189045/

26 4 0
文章推荐： arrays - Swift - 具有特定类类型的数组
文章推荐： c++ - 以对象方式使用 QActions 改进现有代码
文章推荐： javascript - Materializecss 工具提示不适用于 Angularjs
文章推荐： javascript - 谷歌地图 : Cannot read property 'geometry' of undefined
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com