【发布时间】：2016-07-06 20:18:09
【问题描述】：
我最近刚接触到 html 和 css 并且有点坚持这个。我正在处理一个登录框，但我无法让登录框和提交按钮彼此完美对齐。
这种工作的唯一方法是，如果我像这样将它们都写在一行上，那么它们将（水平）完美对齐，但我无法更改它们之间的空间：
第一次尝试（提交
然后我以其他方式解决了这个问题。它由我的 html 文件中的输入类型文本和输入类型提交组成。
在我的 CSS 文件中，我首先调用包含所有登录输入的类（登录部分为 .logsec），然后调用我的输入类型文本的 id 和输入类型提交。
该类称为 logsec（用于登录部分），我的输入类型提交称为 id=Button，我的输入类型文本称为 id=subinput。
HTML 代码：
<html lang="en">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font.css">
<head>
<meta charset="utf-8">
<title>Main</title>
</head>
<body>
<div class="container">
<div class="brandname">
<h1 <id="title" class=""><span id="logo">Test</h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="submit" id="button" value="submit" style="float:right"/>
<input type="text" id="subinput" style="width:100%;"/>
<a href="#"><p class="recover">Recover Password</p></a>
<h3> <a href=".../css/style.css"> <p class="signup">signup</a> </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
</body>
</html>
CSS 代码：
body {
background-color: grey;
font-size: 30px;
text-align: center;
}
.brandname {
margin-top: 300px;
}
.recover {
font-size: 15px;
text-align: center;
}
.signup {
font-size: 15px;
text-align: center;
}
/*///////////////////// LOGIN BUTTON ///////////////////////////////////////*/
.logsec [id=button] {
vertical-align: top;
如果有人可以在这里帮助我，我会很高兴。 我对此很糟糕，但我希望有人能帮助我。
谢谢各位。
【问题讨论】：
-
请把代码贴在这里，作为代码不和图片一样
-
添加一个codepen或只使用code按钮绝对是要走的路——如果没有大量的人工转录，就无法根据图片提供太多帮助。
-
粘贴 HTML 代码时，选择它并点击
ctrl + k -
现在将代码添加到问题中 - 很抱歉之前的遗漏。感谢任何帮助解决这个问题。