Question

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。请任何人都能给我一些帮助。如果你查看代码并运行它，你就会理解我想说的话。请问，任何人都可以告诉我为什么会发生这种情况或为什么我没有得到理想的结果？谢谢！

Answer 1

将float:left;添加到您的身份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元素

1 个答案: