Html 如何使名字和姓氏标签在相应的输入表单下对齐？_Html_Css_Forms_Input_Styles

Html 如何使名字和姓氏标签在相应的输入表单下对齐？

html css forms input

Html 如何使名字和姓氏标签在相应的输入表单下对齐？,html,css,forms,input,styles,Html,Css,Forms,Input,Styles,如何使名字和姓氏标签在相应的输入表单下对齐？有人能逻辑地解释一下吗？我想很多人都想知道这是因为它的美学和专业外观。大部分CSS代码用于执行CSS媒体查询。提前谢谢 <!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home</title> <

如何使名字和姓氏标签在相应的输入表单下对齐？有人能逻辑地解释一下吗？我想很多人都想知道这是因为它的美学和专业外观。大部分CSS代码用于执行CSS媒体查询。提前谢谢

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link href="css/book_now.css" rel="stylesheet" />
</head>
    <body>
        <div id="header">
            <h1>Danny4Help</h1>
        </div>
        <div class="col-4 col-m-12"></div>
        <div class="col-4 col-m-12">
            <div id="container">
                <h2>Book now</h2>
                <p>Get in touch with us</p>
                <ul>
                <li><p>Name</p>
                <input name="fname" size="8"> <input name="lname" size="14">
                <br><label>First</label><label>Last</label>
                </li>  
                </ul>
            </div>
        </div>
        <div class="col-4 col-m-12"></div>
    </body>

这就是我希望它看起来的样子：你可以像这样做

我将每个输入字段包装在一个带有类名

.inputs

的

标记中。我已将该类设置为显示

内联块

，以便

标记彼此内联。然后只需将

标记放在

和

之间，使它们位于不同的行上

HTML

你可以这样做

我将每个输入字段包装在一个带有类名

.inputs

的

标记中。我已将该类设置为显示

内联块

，以便

标记彼此内联。然后只需将

标记放在

和

之间，使它们位于不同的行上

HTML

检查这个

我在您的输入周围添加了一个container div，并在其中放置了相应的标签

调整移动屏幕的css

.form-group {
  position: relative;
  display: inline-block;
}

.form-group label {
  position: absolute;
  bottom: -17px;
  left: 0
}

检查这个

我在您的输入周围添加了一个container div，并在其中放置了相应的标签

调整移动屏幕的css

.form-group {
  position: relative;
  display: inline-block;
}

.form-group label {
  position: absolute;
  bottom: -17px;
  left: 0
}

只需将

输入

和

标签

包装到另一个容器中即可。

div

对这个解决方案很好，特别是因为它被用来修复一个美观的东西

将

输入

和

标签

包装到容器中后，必须将容器的显示设置为

内联块

，因为您希望两个容器相邻

您只需将

输入

和

标签

包装到另一个容器中即可。

div

对这个解决方案很好，特别是因为它被用来修复一个美观的东西

将

输入

和

标签

包装到容器中后，必须将容器的显示设置为

内联块

，因为您希望两个容器相邻

此解决方案也有效。我很高兴您找到了一个您需要的解决方案need@fungusanthrax我只想指出，当屏幕宽度最小化时，我的解决方案不会剪裁。当屏幕宽度最小化时，接受的解决方案会使名为“First”的

变得模糊。此解决方案也有效。我很高兴您找到了一个您需要的解决方案need@fungusanthrax我只想指出，当屏幕宽度最小化时，我的解决方案不会剪裁。当屏幕宽度最小化时，接受的解决方案会使名为“First”的

变得模糊。

     .inputs {
       display: inline-block;
     }

.form-group {
  position: relative;
  display: inline-block;
}

.form-group label {
  position: absolute;
  bottom: -17px;
  left: 0
}