gpt4 book ai didi

html - 无法对齐 html 元素

转载 作者:太空宇宙 更新时间:2023-11-04 03:03:40 26 4
gpt4 key购买 nike

HTML

<html>
<head>
<link rel="stylesheet" type= "text/css" href= "source.css">
<title>Blog Master</title>
</head>
<body>
<div id="login">
<p id="already_member">Already a member?</p>
<input type="text" name="email" value="email id">
</div>
<div id="heading">
<h1>Welcome to the world of blogging</h1>
</div>
<p id ="para_part1">Right Here..Write Now</p>
</body>
</html>

CSS

#login{
background-color:#e0ded8;
width:1500px;
height:30px;
margin-top:0px;
}

#already_member{
font-family:tahoma;
font-style:bold;
color:white;
margin-top:0px;
text-align:top;
}

body{
background-color:#FAEBD7;
}

#heading{
background-color:pink;
text-align:center;border:0.2em solid black;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-direction:reverse;
margin-top:20px;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

#para_part1{
font-family:sans-serif;
font-style:italic;
text-align:center;
font-size:2em;
}

我无法对齐 input元素与 <p>标签,两者都在同一个 div .请任何人都可以为我提供一些帮助。如果您通读代码并运行它,您就会明白我想说的是什么。拜托,谁能告诉我为什么会这样,或者为什么我没有得到想要的结果?谢谢!

最佳答案

添加 float:left; 到你的 id already_member:

#already_member{
font-family:tahoma;
font-style:bold;
color:white;
margin-top:0px;
text-align:top;
float:left;
}

Demo

或者,您可以使用 display:inline; 而不是 float:left;

#already_member{
font-family:tahoma;
font-style:bold;
color:white;
margin-top:0px;
text-align:top;
display:inline;
}

Demo 2

关于html - 无法对齐 html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30872020/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com