Question

我想完成这个观点

enter image description here

我已经开始了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

不要依赖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 2

这是小提琴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 3

Browser Preview

<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%; }

如何完成这个布局？

4 个答案: