0

有人可以指出如何让登录框留下的空白作为标题标题中链接的一部分突出显示吗？显然，我不希望人们点击登录框并链接回主页。尝试浮动 loginBox 元素，但真的不知道该怎么做。这是代码：

 <html>
    <head>
        <link rel="stylesheet" href="css.css"/>
    </head>
    <body>
        <div id="container">
            <a href="#" style="display:block">
                <div id="title">
                <h1>Record Store</h1>
                <img src="images/vinyl.jpg" height="80px" width="auto" />
                </div>
            </a>

                <div id="loginBox">
                    <form action="#">
                        <label>User Name: </label>
                        <input type="text" />
                        <label>Password: </label>
                        <input type="password" />
                        <input type="submit" value="Login"/>
                    </form>
                </div>  

            <div id="navigation" >
                <ul class="navbar">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Vinyl Stock</a></li>
                    <li><a href="#">Online Offers</a></li>
                    <li><a href="#">Collectors News</a></li>
                    <li><a href="#">Join</a></li>
                </ul>
            </div>
            <div id="content">
                <p>You'd be a fool to believe anything on this site</p>
            </div>
            <div id="footer">
                <span id="adminLogin"><a href="#">Admin Login</a></span>
                <p id="copyright">&copy;</p>
            </div>
        </div>
    </body>
</html>

和

* {
        padding: 0;
    margin:0;
}

body{
    font-family: Arial, Verdana, Helvetica;
}

h1{
    font: bold 2.8em Arial, Verdana, Helvetica;
    position:absolute;
    left: 10px;
    top:5px;

}

img { 
    position: absolute;
    left:300px;
    /*top:5px;*/

    }


#container {
    margin: auto;
    width: 800px;
    border: 1px solid black;
    z-index: -9;
}

#title {

    margin:auto;
    /*border: 1px solid black;*/
    height: 16%;
    position: relative;
}

#loginBox{
    float:right;
    border: 1px solid black;
}

#navigation{
    clear:both;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    height: auto;
    overflow: auto;
    background-color: blue;
}

#content{
    min-height:400px;
    background-color: white;
}

#adminLogin{
    float:right;
    margin-right: 60px;
    margin-top: 20px;
}

#footer{
    height:100px;
    background-color: red;
}

#copyright{
    clear: both;
    text-align: center;

}




.navbar {

}

.navbar ul {

}


.navbar li {

    font: bold 12px/1.2em Arial, Verdana, Helvetica;
    height: auto;
    list-style: none;
    text-align: center;
    width: 20%;
    float:left;
    background-color: blue;
    padding: 1% 0px;



}
.navbar a {
    border-right: 1px solid #1F5065;
    color: white;
    display: block;
    text-decoration: none;

}

.navbar li:hover a {
    color: black;

}

.navbar li:hover{
    background-color: white;

}
4

1 回答 1

0

我认为你最好的选择是用你的锚填充父 div，然后绝对将登录放在顶部。绝对定位的标题和图像最好使用填充放置，以保持框的自然高度。

h1 {
    font: bold 2.8em Arial,Verdana,Helvetica;
    display: inline-block;
    vertical-align: top;
}

#header {
    position: relative;
    margin:auto;
}
#title {
    padding: 5px 0 24px 10px;
}
#loginBox{
    border: 1px solid black;
    position:absolute;
    right:0;
    bottom:0;
}

然后添加你的相对 div，比如

    <div id="header">
        <a href="#" style="display:block">
            <div id="title">
            <h1>Record Store</h1>
            <img src="images/vinyl.jpg" height="80px" width="auto" />
            </div>
        </a>

        <div id="loginBox">
            <form action="#">
                <label>User Name: </label>
                <input type="text" />
                <label>Password: </label>
                <input type="password" />
                <input type="submit" value="Login"/>
            </form>
        </div>  
    </div>
于 2013-11-11T23:10:47.363 回答