Question

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

<!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>

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

Answer 1

我希望这会有所帮助：

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>

CSS

* { 
        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;
    }
}

查看http://jsfiddle.net/c5o3wywc/2/

的预览

CSS-Place元素放在div的末尾

1 个答案: