Html 无法对齐标签，无法在表单中输入_Html_Css

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

html css

Html 无法对齐标签，无法在表单中输入,html,css,Html,Css,您好，我在对齐html页面中的标签、输入字段和下拉框时遇到问题。我希望标签在左边对齐，然后在旁边输入。但它到处都是，而且很难对齐。我希望我的表格是这样的但我的页面当前看起来如下所示：下面是我的html和css代码： <!Doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=de

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

但我的页面当前看起来如下所示：

下面是我的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>

请能引导我在正确的方向，如何目前调整标签和输入一样，在第一张图片

如果您将

输入的每一行

和

标签

放入包装器

div

中，您就可以轻松解决遇到的问题。包装器的作用类似于围绕该行的标签和输入的全宽度包装器。每一个新标签和输入都将进入下一行

我还对

标签样式做了一些调整，因为它需要显示：内联块和否<代码>浮动：左侧是必需的
请参阅。
我知道您想要一个本机css解决方案，但为了好玩，我做了一个引导版本。你可以查一下
我的解决方案的等效方法是为标签和输入设置特定的宽度：
input,label{
  display:inline-block;
  width:60%;
}
label{
  width:30%;
}

并确保总和为100%，或者像我在中所做的那样使用container div。
是否可以使用bootstrap？@rsabir此练习没有bootstrap您面临的问题是“float”如何工作。您当前仅将其应用于标签，以便在输入不浮动的情况下使它们全部堆叠起来。给你一个提示。我考虑过这个想法，但不确定这是否是正确的方法。如果我想让投递箱在文本区域后的地址标签右侧浮动。我该怎么走that@JenniferFitzgerald给他们一个额外的类，并将label，
textarea`dropbox
设置为float:left试着玩一下，我们是来帮忙的，但不是来做作业的。谢谢你的帮助。没问题，你帮了大忙
input,label{
  display:inline-block;
  width:60%;
}
label{
  width:30%;
}