CSS-Place元素在div末尾

我試圖將元素放在標題的末尾。我正在使用所見即所得的設計器。在設計師中，這是我想要的，但在瀏覽器上，元素不在我想要的位置。這裏是代碼：CSS-Place元素在div末尾

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

我想把元素在標題的結尾，但我不能。我知道這是因爲我使用絕對定位，但我不知道如何解決它。感謝幫助。

來源

2015-06-28 Ömer Keskin

哪些元素是我們談論的是一個預覽？順便說一句，這裏是[小提琴]（http://jsfiddle.net/MrLister/c5o3wywc/）。 –

絕對定位是佈局網頁的非常糟糕的方法。它非常不靈活，並且有更好更快的響應選項。試試[** LearnLayout.com **]（http://learnlayout.com/） –

你爲什麼使用所見即所得的設計師？ –

我希望這有助於：

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/

來源

2015-09-16 18:00:44 herrh

CSS-Place元素在div末尾

回答

相關問題