Html 将锚元素和按钮定位在标签内_Html_Css

Html 将锚元素和按钮定位在标签内

html css

Html 将锚元素和按钮定位在标签内,html,css,Html,Css,这是我的登录页面：抱歉，我试图在JSFIDLE上发布我的代码，但它把事情搞砸了无论如何……这是我的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="style

这是我的登录页面：

抱歉，我试图在JSFIDLE上发布我的代码，但它把事情搞砸了

无论如何……这是我的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.TextBox的容器…事情是这样的：我正试图让带有锚的标签和里面的按钮显示为三个相同大小的“块”…每个块的大小为33%…而按钮将恰好是现在的位置。它位于正确的位置，因为我已将其父标签设置为“文本对齐”设置为“右侧”…但它破坏了我的3个块，每个块的大小都相同…我如何才能做到这一点

还有一件事……用于封装组件的标签或字段集？

出于您的目的，HTML 5中的标签与div类似，因此您可以使用与div相同的方式添加类和id：

如果框宽度没有动态调整，并且假设.boxLogin标签的高度为180px，只需为每个标签指定一个类，如.heightSetter，然后在css中添加：

.高度设定器{ 高度：60px；浮动：对； }

这将使所有元素的高度相等，并将元素浮动到封闭元素的右侧

确保在CSS中为.boxLogin设置height属性