1
內的按鈕這裏是我的登錄頁面：
定位錨元素和標籤
對不起，我試圖張貼的jsfiddle我的代碼，但它攪亂它大的時候......
反正...這裏是我的HTML和CSS：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Território Levita</title>
<link type="text/css" rel="stylesheet" href="css/StyleSheet1.css" />
<script src="js/JavaScript1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<header class="headerLogin">
<h1>Território Levita</h1>
</header>
<div class="boxLogin">
<h1>Área de Login</h1>
<label>
<span>Usuário: </span>
<asp:TextBox runat="server" ID="txtUsuario" CssClass="inputText" ></asp:TextBox>
</label>
<label>
<span>Senha: </span>
<asp:TextBox runat="server" ID="txtSenha" TextMode="Password" CssClass="inputText"></asp:TextBox>
</label>
<label id="labelBtn">
<a href="#">Cadastre-se</a>
<a href="#">Esqueci minha senha</a>
<asp:Button runat="server" CssClass="btn" ID="btnLogar" Text="Entrar" />
</label>
</div>
</form>
</body>
</html>
* { /*Zerando margin e padding global.*/
margin: 0px;
padding: 0px;
}
body { /*Estilo de body*/
background-color: #fff;
}
.inputText { /*Zerando padding dos inputs*/
padding: 0px;
}
.headerLogin { /*Área de login*/
width: 95%;
background-color: #67BCDB;
margin: 10px auto 150px auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 100px;
line-height: 100px;
position: relative;
-moz-box-shadow: 0 0 10px #4e707c; /*Sombra Firefox*/
-webkit-box-shadow: 0 0 10px #4e707c; /*Sombra chrome*/
box-shadow: 0 0 10px #4e707c;
}
.headerLogin h1 { /*Texto do cabeçalho*/
color: #fff;
text-transform: uppercase;
margin-left: 20px;
display: inline-block;
}
.boxLogin { /*Estilo da área de login*/
-moz-border-radius: 5px; /*Firefox*/
-webkit-border-radius: 5px; /*Chrome*/
border-radius: 5px; /*IE*/
border: 8px solid #eee;
-moz-box-shadow: 0 0 10px #4e707c; /*Sombra Firefox*/
-webkit-box-shadow: 0 0 10px #4e707c; /*Sombra chrome*/
box-shadow: 0 0 10px #4e707c; /*Sombra IE*/
margin: 0px auto;
width: 500px;
position: relative;
}
.boxLogin h1 { /*Estilo do cabeçalho*/
font-weight: normal;
font-size: 22px;
text-align: center;
background-color: #67BCDB;
color: #fff;
text-transform: uppercase;
padding: 2px 2px 2px 2px;
margin-bottom: 10px;
height: 50px;
line-height: 50px;
}
.boxLogin label { /*Container dos controles*/
display: block;
width: 90%;
background-color: #dbd8d8;
margin: 0 auto 10px auto;
-moz-border-radius: 6px; /*Firefox*/
-webkit-border-radius: 6px; /*Chrome*/
border-radius: 5px; /*IE*/
padding: 1px 1px 1px 1px;
}
.boxLogin span { /*Estilo do texto (usuário e senha)*/
float: left;
width: 60px;
text-align: left;
margin-left: 5px;
font-size: 1.2em;
letter-spacing: 1px;
font-family: 'Bitstream Vera Sans Mono';
font-weight: normal;
}
.boxLogin .inputText { /*Estilo dos inputs*/
width: 200px;
padding: 5px;
margin-top: 1px;
margin-bottom: 1px;
margin-left: 150px;
}
.boxLogin #labelBtn { /*Container do botão*/
background: #fff;
position: relative;
text-align: right;
}
.btn { /*Estilo do botão*/
background-color: #E44424;
padding: 7px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
color: #fff;
-moz-box-shadow: 0 0 10px #4e707c; /*Sombra Firefox*/
-webkit-box-shadow: 0 0 10px #4e707c; /*Sombra chrome*/
box-shadow: 0 0 10px #4e707c;
cursor: pointer;
width: 150px;
}
#labelBtn .btn {
}
a {
text-decoration: none;
}
正如你所看到的，我有標籤，作爲我的跨度和asp.textboxes容器......這裏的東西：我試圖使標籤與錨和按鈕裏面顯示他們作爲三個'塊'相同的大小...每個33％...和按鈕將是現在的確切位置。它是在正確的位置，因爲我已經設置了它的父標籤，將文本對齊設置爲正確的......但它破壞了我的「每塊大小相同的3個塊」的計劃......我怎麼能使它發生？
還有一件事情....用於封裝組件的標籤或字段集？