Question

当我将一个表格WITH ELEMENTS添加到文档的另一部分时，导航按钮没有明显的原因跳下来。

＆＃13;

/* header.css */

.header{
    width: 985px;
    margin: 0 auto;
    margin-top: 20px;
    font-family: Helvetica, Arial, sans-serif;
    text-transform: capitalize;
}

.header ul, .header ul li, .header a{
    padding: 0;
    margin: 0;
    display: inline-block;
    color: #000;
    text-decoration: none;
}

.header a.homeButton{
    font-size: 1.6em;
    font-weight: bold;
    margin-right: 100px;
    margin-bottom: 10px;
    text-shadow: 3px 5px 3px rgba(0,0,0,.17);
}

.header a.homeButton:hover{
    text-shadow: 3px 1px 2px rgba(0,0,0,.15);
}

.header ul{
    float: right;
}

.header ul a{
    margin: 2px;
    padding: 5px 7px;
    border: 1px solid black;
    border-radius: 2px;
    border-bottom: 2px solid black;
    box-shadow: 2px 3px 2px rgba(0,0,0,.3);
}

.header ul a:hover, .header a.active{
    background: #F0F0F0;
    border-bottom: 1px solid black;
    box-shadow: 1px 2px 1px rgba(0,0,0,.2);
}

/* register.css */

body, h1, p{
    padding: 0;
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
}

.wrapper{
    width: 990px;
    padding: 10px;
    padding-top: 0;
    margin: 0 auto;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <link rel="stylesheet" href="css/header.css"/>
    <link rel="stylesheet" href="css/register.css"/>
</head>

<body>
    <div class="header">
        <a href="index.html" class="homeButton">Confident parenting</a>
        <ul class=menu>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About us</a></li>
            <li><a href="testimonials.html">Testimonials</a></li>
            <li><a href="register.html" class=active>Register</a></li>
        </ul>
    </div>

    <div class="wrapper">

        <h1>Register</h1>
        <p>Please fill out the forms below. We will contact you for more infromation.</p>

        <form action="" method="GET">
            <label for="Name">Name:</label>
            <input id="Name" name="name" type="text">

            <label for="email">E-mail:</label>
            <input id="email" name="email" type="text">

            <label for="comments">Comments:</label>
            <textarea id="comments" name="comments"></textarea>
        </form>

    </div>

</body>
</html>

＆＃13;

这是我得到的：

输入字段与文档的单独部分中的浮动混乱

0 个答案: