Html CSS将元素放在div的末尾_Html_Css

Html CSS将元素放在div的末尾

html css

Html CSS将元素放在div的末尾,html,css,Html,Css,我试图把元素放在标题的末尾。我使用的是所见即所得的设计器。在designer中，这是我想要的，但在浏览器中，元素不在我想要的位置。代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Home</title> <styl

我试图把元素放在标题的末尾。我使用的是所见即所得的设计器。在designer中，这是我想要的，但在浏览器中，元素不在我想要的位置。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Home</title>
<style type="text/css">
    #header
    {
        background-color:#FF6600;
        height: 151px;
        width:100%;
    }
    #title
    {
        z-index: 1; 
        left: 20px;
        top: 32px; 
        position: absolute; 
        height: 47px; 
        width: 353px;
        color:White;
        font-size:48px;
        font-family:Consolas;
    }
    #motto
    {
        z-index: 1; 
        left: 21px; 
        top: 103px; 
        position: absolute; 
        height: 42px;
        width: 381px;
        right: 951px;
        font-size:20px;
        color:White;
    }
    div
    {
        font-family:Consolas;
        width: 121px;
    }
    #txtUserName
    {
        z-index: 1;
        left: 1083px;
        top: 23px;
        position: absolute;
        width: 250px;
        height: 30px;
    }
    #txtPassword
    {
        z-index: 1;
        left: 1082px;
        top: 65px;
        position: absolute;
        width: 250px;
        height: 30px;
    }
    #btnLogin
    {
        z-index: 1;
        left: 1082px;
        top: 107px;
        position: absolute;
        width: 250px;
        height: 30px;
        background-color:Black;
        color:White;
        font-family:Consolas;
        font-size:20px;
    }
</style>
</head>
<body style="background-color:#F5F5F5; height: 748px;">
    <div id="header">
        <div id="title">
            My Webpage
        </div>
            <div id="motto">
            Home
            </div>
            <input id="txtUserName" type="text" />
            <input id="txtPassword" type="text" />&nbsp;
        <input id="btnLogin" type="submit" value="Login" />
    </div>
</body>
</html>


家
#标题
{
背景色：#FF6600；
高度：151px；
宽度：100%；
}
#头衔
{
z指数：1；
左：20px；
顶部：32px；
位置：绝对位置；
高度：47px；
宽度：353px；
颜色：白色；
字体大小：48px；
字体系列：Consolas；
}
#座右铭
{
z指数：1；
左：21px；
顶部：103px；
位置：绝对位置；
高度：42px；
宽度：381px；
右：951px；
字体大小：20px；
颜色：白色；
}
div
{
字体系列：Consolas；
宽度：121px；
}
#txtUserName
{
z指数：1；
左：1083px；
顶部：23px；
位置：绝对位置；
宽度：250px；
高度：30px；
}
#TXT密码
{
z指数：1；
左：1082px；
顶部：65px；
位置：绝对位置；
宽度：250px；
高度：30px；
}
#btnLogin
{
z指数：1；
左：1082px；
顶部：107px；
位置：绝对位置；
宽度：250px；
高度：30px；
背景色：黑色；
颜色：白色；
字体系列：Consolas；
字体大小：20px；
}
我的网页
家

我想把元素放在标题的末尾，但我不能。我知道这会发生，因为我使用绝对定位，但我不知道如何解决它。谢谢你的帮助。

我希望这有助于：

html

请参见

上的预览，我们讨论的是哪些元素？顺便说一下，绝对定位是一种非常糟糕的网页布局方法。它极不灵活，而且有更好、更灵活的选择。试试看，为什么要使用所见即所得设计器？

<div id="header">
    <div class="login-wrapper">
        <input id="txtUserName" type="text" placeholder="username" />
        <input id="txtPassword" type="text" placeholder="password" />&nbsp;
        <input id="btnLogin" type="submit" value="Login" />
    </div>
    <h1>My Webpage</h1>
    <ul>
        <li><a href="link-here">Home</a></li>
        <li><a href="link-here">About</a></li>
        <li><a href="link-here">Misc</a></li>
    </ul>        
</div>

* { 
        margin: 0;
        padding: 0
    }    
    #header {
        background-color:#FF6600;
        width: 100%;
        padding: 15px;
        clear: both;
    }
    #header input[type="text"], 
    #header input[type="password"] {
        border: 1px solid black;
        display: inline-block;
        padding: 5px;

    }
    #header h1 {
        color: white;
        font-size: 30px;
        margin-top: 0;
    }
    #header .motto {
        font-size:20px;
        color: white;
        display: block;
    }
    #header .login-wrapper {
        float: right;
        margin: 10px;
    }
    #header ul li{ 
        list-style: none;
        display: inline-block;
    }
    #header ul li a{
        text-decoration: none;
        color: white;
        display: block;
        margin: 10px;
    }
}