如何使用css对齐多个输入 [英] How to align multiple input using css
问题描述
我正在尝试实现一个简单的登录页面，并且我需要对齐一些输入文本：
这是我的css：
body {
background-image：url（image / bg.jpg）;背景大小：100％;
}
.content {
border：1px solid gray;
margin-top：180px;
margin-left：380px;
背景颜色：＃464749;
width：333px;
height：352px;
padding：58px 76px 0 76px;
颜色：#ebebeb;
字体：12px Arial，Helvetica，sans-serif;
}
span {
display：block;
margin-left：30px;
}
input {
width：205px;
padding：10px 4px 6px 3px;
border：1px solid＃0d2c52;
背景颜色：＃1e4f8a;
font-size：16px;
}
.nameField {
display：inline;
width：80px;
text-align：right;
padding：14px 10px 0 0;
margin：0 0 7px 0;
}
.inputField {
display：inline;
width：230px;
保证金：0;
margin：0 0 7px 0;
}
这是我的html：
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 // EN
http://www.w3.org/TR/ HTML4 / strict.dtd>
< html xmlns =http://www.w3.org/1999/xhtmllang =en>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>登入< / title>
< link rel =stylesheettype =text / csshref =main.css/>
<！ - 日期：2012-05-30 - >
< / head>
< body>
< div class =content>
< h2>登入< / h2>
< span>
< div class =nameField>
用户名：
< / div>
< div class =inputField>
< input type =textname =usernamesize =30maxlength =2048/>
< / div>
< / span>
< span>< div class =nameField>
密码：
< / div>
< div class =inputField>< input type =passwordname =passwordsize =30maxlength =2048/>
< / div>
< / span>
< / div>
< / body>
< / html>
我的输出是：
文本？有人能帮我吗？？ thanksssss
删除inputField类的宽度，并将nameField和inputField类的显示从内联更改为内联块。
jsFiddle示例 strong>。 CSS： i'm trying to realize a simple login page and i need to align some input text: this is my css: This is my html : My output is: How can i align that blue input text? can someone help me?? thanksssss Drop the width on the inputField class and change the display on the nameField and inputField classes from inline to inline-block. CSS:
这篇关于如何使用css对齐多个输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
.nameField {
显示：inline-block;
width：80px;
text-align：right;
padding：14px 10px 0 0;
margin：0 0 7px 0;
}
.inputField {
display：inline-block;
width：130px;
保证金：0;
margin：0 0 7px 0;
}
body {
background-image: url(image/bg.jpg); background-size: 100%;
}
.content{
border: 1px solid gray;
margin-top:180px;
margin-left:380px;
background-color: #464749;
width:333px;
height: 352px;
padding: 58px 76px 0 76px;
color: #ebebeb;
font: 12px Arial, Helvetica, sans-serif;
}
span{
display:block;
margin-left: 30px;
}
input{
width: 205px;
padding: 10px 4px 6px 3px;
border: 1px solid #0d2c52;
background-color:#1e4f8a;
font-size: 16px;
}
.nameField{
display:inline;
width:80px;
text-align: right;
padding: 14px 10px 0 0;
margin:0 0 7px 0;
}
.inputField{
display:inline;
width:230px;
margin:0;
margin:0 0 7px 0;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<!-- Date: 2012-05-30 -->
</head>
<body>
<div class="content">
<h2>Login</h2>
<span>
<div class="nameField">
Username:
</div>
<div class="inputField">
<input type="text" name="username" size="30" maxlength="2048"/>
</div>
</span>
<span><div class="nameField">
Password:
</div>
<div class="inputField"><input type="password" name="password" size="30" maxlength="2048"/>
</div>
</span>
</div>
</body>
</html>
.nameField{
display:inline-block;
width:80px;
text-align: right;
padding: 14px 10px 0 0;
margin:0 0 7px 0;
}
.inputField{
display:inline-block;
width:130px;
margin:0;
margin:0 0 7px 0;
}
