对齐输入框（名称）和提交按钮
[英]Align Input box (name) and Submit Button
问题描述
我最近刚接触html和CSS，有点卡在这上面。 我正在使用登录框，但无法使登录框和提交按钮彼此完美对齐。
这种工作的唯一方法是，如果我将它们都写在这样的一行上，那么它们将（水平）完美对齐，但是我无法更改它们之间的空间：
首次尝试（<后没有点号的代码）：<.input type =“ text” id =“ username”>提交
然后我以其他方式解决了。 它由我的html文件中的输入类型文本和输入类型组成。
在我的CSS文件中，我首先调用所有我的登录输入都被嵌套的类（登录部分为.logsec），然后调用我的输入类型文本的ID和输入类型Submit。
该类称为logsec（用于“登录”部分），而我的输入类型Submit称为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;
如果有人可以在这里帮助我，我将非常喜欢。 太糟糕了，但我希望有人能帮助我。
多谢你们。
1 个解决方案
解决方案1
0 已采纳 2016-07-07 01:36:41
您的代码中存在一些错误，其中一个“ .logsec [id = button]”阻止了按钮对齐。 我删除了浮动并改为使用内联块。 Google，我敢肯定W3C有一些教程。 无论如何，这是工作代码：
的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;
}
#subinput {
display: inline-block;
}
的HTML
<div class="container">
<div class="brandname">
<h1 id="title"><span id="logo">Test</span></h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="text" id="subinput"/>
<input type="submit" id="button" value="submit"/>
<a href="#"><p class="recover">Recover Password</p></a>
<h3> <a href=""> <p class="signup">signup</a> </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
这是在小提琴的工作（我希望，不知道该代码多久节省了） FIDDLE
对齐图像按钮和输入框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.