使第一行和下一行平行
对不起，如果我的问题标题不能理解，我的英语不好。所以我想在网站上做一个登录页面。我已经做了电子邮件和密码输入框，这样用户可以填补空白。但是输出是这样的：
电子邮件：
密码：
我希望两个冒号像平行一样互相直。
谢谢任何人帮助我。这是密码。
<!DOCTYPE HTML>
<html>
<head>
<title>M-Shop®</title>
<style>
#login{
background-color:white;
width:300px;
height:300px;
border:solid black 2px;
overflow:hidden;
position:relative;
left:40%;
}
#tombollog{
position:relative;
left:40%;
top:20%;
}
#lupa{
position:relative;
left:15%;
top:30%;
}
#email(
position:relative;
left:50%;
)
</style>
</head>
<body>
<div id="login">
<p style="text-align:center;">Log in</p>
<p style="text-align:center;"> M-Shop® </p>
<p id="email">Email :<input type="text"></p>
<p>Password :<input type="text"></p>
<a id="tombollog" href="">Log in</a>
<a id="lupa" href="">Lupa Password ?</a>
</div>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2022-05-04 04:17:26
若要在文本之前、之后或之间创建额外的空格，请使用 或  (无损空格)扩展的HTML字符。
您还可以使用附加的HTML  和 分别添加两个和四个不间断的空格。
下面的代码将对您有帮助。
<!DOCTYPE HTML>
<html>
<head>
<title>M-Shop®</title>
<style>
#login {
background-color: white;
width: 300px;
height: 300px;
border: solid black 2px;
overflow: hidden;
position: relative;
left: 40%;
}
#tombollog {
position: relative;
left: 40%;
top: 20%;
}
#lupa {
position: relative;
left: 15%;
top: 30%;
}
#email {
position: relative;
left: 50%;
}
</style>
</head>
<body>
<div id="login">
<p style="text-align:center;">Log in</p>
<p style="text-align:center;"> M-Shop® </p>
<p id="email">Email : <input type="text"></p>
<p>Password : <input type="text"></p>
<a id="tombollog" href="">Log in</a>
<a id="lupa" href="">Lupa Password ?</a>
</div>
</body>
</html>
Stack Overflow用户
发布于 2022-05-04 06:28:37
下面的解释，后面是带有/* comments */的新代码
如下面所示，您需要用<div>包装电子邮件和密码部分(您可以任意使用ID或类--我选择了一个“并行”类)。
您想要使用的神奇CSS是display: flex;，使用justify-content: center;...alternatively，justify-content: space-around将创建一些令人愉快的间隔。如果您确实选择了CENTER，请考虑在适当的空间中添加gap: 12px。
我扩大了盒子，以更好地适应内容，以及。
此外，您可能希望删除静态定位(如top或left )，并使用类似于margin-inline: auto的东西在其空间中对项目进行居中。注意:这将不适用于display: flex。
又一张纸条-小心！您有括号包装您的#email CSS块。确保你使用的是{ curly braces }
请参阅我对下面代码的修改(请随时复制和使用它)
<!DOCTYPE html>
<html>
<head>
<title>M-Shop®</title>
<style>
#login {
background-color: white;
width: 600px; /* widened to fit the content */
height: 300px;
border: solid black 2px;
overflow: hidden;
position: relative;
/* left:40%; remove this and instead use margin-inline*/
margin-inline: auto; /* this will PROPERLY center the box */
}
#tombollog {
position: relative;
left: 40%;
top: 20%;
}
#lupa {
position: relative;
left: 15%;
top: 30%;
}
/* make sure this is curly braces - you had parentheses */
#email {
position: relative;
/* left: 50%; perhaps remove this style */
}
.parallel {
display: flex; /* this will make them parallel*/
justify-content: center; /*center the content with */
gap: 12px; /* adds a gap - feel free to change the value*/
}
</style>
</head>
<body>
<div id="login">
<p style="text-align: center">Log in</p>
<p style="text-align: center">M-Shop®</p>
<div class="parallel">
<p id="email">Email :<input type="text" /></p>
<p>Password :<input type="text" /></p>
</div>
<a id="tombollog" href="">Log in</a>
<a id="lupa" href="">Lupa Password ?</a>
</div>
</body>
</html>结果：
https://stackoverflow.com/questions/72107835
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号