如何完成此佈局？

Question

我想完成這個觀點

我已經開始了一個fiddle，但它甚至還沒有接近我想要什麼，我不知道如何着手。你可以幫我嗎？

<div class="Account_Administration"> 
    Account Administration 
</div> 

<form id="inputForm" action="/admin/execute" method="post"> 

    <div class="username_password"> 
     Användarnamn 
    </div> 
    <div class="fields"> 
     <input id="username" name="username" value="Test" class="textInput" type="text" value=""/> 
    </div> 
    <br> 

    <div class="username_password"> 
     Lösenord 
    </div> 
    <div class="fields"> 
     <input id="password" name="password" value="Test" class="textInput" type="text" value=""/> 
    </div> 
    <br> 

    <div class="knappar"> 
     <div class="Logga_in"> 
      Log in 
     </div> 
     <!-- <input id="submitButton" type="submit" value="OK"/> --> 
    </div> 

    <div class="knappar"> 
     <div class="Logga_in"> 
      Avbryt 
     </div> 
    <!-- <input id="submitButton" type="submit" value="OK"/> --> 
    </div> 

</form> 

Answer 1

下面是小提琴http://jsfiddle.net/56Y3h/1/
HTML5的reset.css包括：http://jsfiddle.net/56Y3h/2/

但我也用HTML5重置的CSS，你可以抓住它http://html5doctor.com/html-5-reset-stylesheet/

使用position:absolute;使事情變得困難和靜態。

我已經重寫了html和css（但這不是1合1版本，但足以讓事情發揮作用）。你可以改變你自己的風格，等等......根據你的需要。

HTML：

<div class="login"> 
     <h3 class="marg-left title">Account Administration</h3> 
     <hr /> 

     <form class="marg-left"> 
      <h4 class="title">Logga in</h4> 

      <label> 
       <span>Anvardarnamn</span> 
       <input type="text" /> 
      </label> 

      <label> 
       <span>Losenord</span> 
       <input type="text" /> 
      </label> 

      <div class="buttons"> 
       <button>Logga In</button> 
       <button>Avbryt</button> 
      </div> 
     </form> 
    </div> 

的style.css

.login { 
    width: 500px; 
} 

.login * { 
    font-family:"Futura"; 
} 

.login .marg-left { 
    margin-left: 30px; 
} 

.title { 
    font-weight: normal; 
    font-size: 23px; 
    color: rgb(0, 114, 198); 
    line-height: 1.429; 
    z-index: 70; 
} 

.login hr { 
    height:0; 
    border: 1px solid rgb(0, 114, 198); 
} 

.login form { 
    width: 445px; 
    overflow: hidden; 
} 

.login label { 
    padding: 2px; 
    display: block; 
    line-height: 22px; 
    background: #ebebeb; 
    font-size: 13px; 
    margin-top: 10px; 
    overflow: hidden; 
} 

.login label span { 
    display: inline-block; 
    padding-left: 10px; 
} 

.login label input { 
    display: inline-block; 
    width: 270px; 
    height: 20px; 
    float: right; 
    border: none; 
    outline: none; 
} 


.login .buttons { 
    margin-top: 7px; 
    float: right; 
} 

.login .buttons button { 
    display: inline-block; 
    height: 33px; 
    line-height:30px; 
    background: rgb(0, 114, 198); 
    color: white; 
    font-size: 17px; 
    border: none; 
} 

Answer 2

不要依賴的div的造型。相反，請嘗試使用更適合的標記元素。所以，替換一些你的div你標記應該是這個樣子：

<label class="username_password"> 
    Användarnamn 
</label> 

    <input id="username" name="username" value="Test" class="textInput" type="text" value=""/> 

<br> 

<label class="username_password"> 
    Lösenord 
</label> 

    <input id="password" name="password" value="Test" class="textInput" type="text" value=""/> 

<br> 

<button class="knappar" value="Log in"> 

<button class="knappar" value="Aybryt"> 

Answer 3

<style type="text/css"> 
.Account_Administration 
{ 
    height: 45px; 
    padding-left: 10px; 
    border-bottom: 2px solid rgb(0, 114, 198); 
    font-size: 30.0px; 
    font-family: Calibri; 
    color: rgb(0, 114, 198); 
} 
.Log_in 
{ 
    height: 35px; 
    margin-left: 15px; 
    font-size: 20.0px; 
    font-family: Calibri; 
    color: rgb(0, 114, 198); 
} 
#inputForm 
{ 
    margin-left: 20px; 
} 
.single_field_container 
{ 
background-color: #eaeaea; 
border-radius: 2px; 
padding: 0px; 
} 
.username_password 
{ 
float: left; 
width: 35%; 
font-size: 10px; 
font-family: Calibri; 
padding-top: 4px; 
padding-left: 5%; 
} 
.fileds 
{ 
float: left; 
width: 40%; 
} 
#username,#password 
{ 
width: 59.8%; 
border:1px solid transparent; 
border-radius: 2px; 
font-size: 10px; 
} 
#buttons_container 
{ 
float: right; 
width: 40%; 
} 
.knappar 
{ 
width: 20%; 
float: right; 

} 
.Logga_in 
{ 
background-color: #0088cc; 
float: right; 
padding: 5%; 
padding-left: 10%; 
padding-right: 10%; 
border-radius: 2px; 
color: #fff; 
font-family: calibri; 
}  
</style> 


<div class="Account_Administration"> 
Account Administration 
</div> 

<div class="Log_in"> 
Logga in 
</div> 

<form id="inputForm" action="/admin/execute" method="post"> 

<div class="single_field_container"> 
    <div class="username_password"> 
     Användarnamn 
    </div> 
    <div class="fields"> 
     <input id="username" name="username" class="textInput" type="text" value=""/> 
    </div> 
</div> 

<br> 

<div class="single_field_container"> 
    <div class="username_password"> 
     Lösenord 
    </div> 
    <div class="fields"> 
     <input id="password" name="password" class="textInput" type="text" value=""/> 
    </div> 
</div> 

<br> 

<div id='buttons_container'> 
    <div class="knappar"> 
     <div class="Logga_in"> 
      Avbryt 
     </div> 
     <!-- <input id="submitButton" type="submit" value="OK"/> --> 
    </div> 

    <div class="knappar"> 
     <div class="Logga_in"> 
      Log in 
     </div> 
    <!-- <input id="submitButton" type="submit" value="OK"/> --> 
    </div> 
</div> 

</form> 

</html> 

Answer 4

只要改變顏色，做出一些調整。字體，邊框，邊距。

http://jsfiddle.net/NT2LY/

HTML

<div class="content clearfix"> 
<h1>Account Administration</h1> 
<h2>Logga in</h2> 
<form class="clearfix"> 
    <div class="label clearfix"> 
     <label for="anvandarnamn">Användarnamn</label> 
     <input type="text" name="anvandarnamn" /> 
    </div> 
    <div class="label clearfix"> 
     <label for="anvandarnamn">Användarnamn</label> 
     <input type="text" name="anvandarnamn" /> 
    </div> 
    <hgroup> 
     <input type="submit" value="Logga in"/> 
     <input type="submit" value="Avbryt"/> 
    </hgroup> 
</form> 

CSS

h1 { color: #0000ff; font-size: 28px; border-bottom: solid 2px #0000ff; padding: 0 0 10px 20px; font-family: sans-serif; font-weight: normal; } 
h2 { color: #0000ff; font-size: 28px; font-family: sans-serif; font-weight: normal; padding-left: 20px } 
label{ float: left; line-height: 25px } 
input[type="text"]{ float: right; width: 300px; margin: 0; height: 25px; border: none } 
input[type="submit"]{ background: #0000ff; padding: 5px; color: white; border:none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 20px } 
hgroup{float: right; } 
.label { width: 100%; background: #ccc; display: inline-block; padding: 2px 2px 2px 10px; float: left; margin: 5px 0;} 
.clear { clear: both; } 
.content { width: 550px; padding: 20px } 
.clearfix:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } 
.clearfix {display: block; } 
* html .clearfix {height: 1%; }