Question

我正在编写一个网站并遇到问题。当我调整浏览器大小时，它会在左侧添加一个额外的空间，但当我再次扩展浏览器时会消失。我知道这是因为max-width属性，因为当我删除它时，问题就会消失。我做错了什么？

navbar.css

/* controls the labookin text*/
.wrapper h1 {
    padding: 0px;
    margin: 0px;
    display: inline-block;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;
    position: relative;
    top: 16px;
}

/*controls the positon of input boxes */
.wrapper form {
    display: inline-block;
    position: relative;
    top: 14px;
}

/*contols the nav bar green width*/
.wrapper {
    height: 75px;
    background-color:  #008000;
    text-align: center;
    padding: 0px;
    min-width: 1300px;    
}

/*contols the form inputs exept the image input in the form*/
.box {
    width: 245px;
    height: 22px;
    padding: 10px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 16px;
    color: gray;
    border-radius: 5px;
    border: 1px solid black;
    position: relative;
    top: -5px;
}

/*controls the image form input*/
.go {
    vertical-align: middle;
    position: relative;
    top: -5px;
}

/*controls login and sign up buttons*/
.bttns img {
    position: relative;
    top: -40px;
    left: -10px;
    float: right;
    padding: 5px;
    border-radius: 9px;
    width: 110px;  
}

navbar.php

<!doctype html>
<html lang="en">
    <head>
        <title><!-- Insert your title here --></title>
    </head>
    <link rel="stylesheet" type="text/css" href="navbar.css">
    <body style="margin: 0;padding: 0;background-color:#F0E8E8">
        <div class="wrapper">
            <h1>LABOOKIN</h1>
            <form action="#" method="GET">
                <input class="box"type="text" name="find" placeholder="Find...">
                <input class="box" type="text" name="near"placeholder="Near...">
                <input class="go"type="image" src="images/search.png" width="43px"alt="search">
            </form>

            <div class="bttns">
                <img src="images/theloginbttn.png">
                <img src="images/thesignupbttn.png">
            </div>
        </div>
    </body>
</html>

任何帮助将不胜感激！

调整浏览器大小时，max-width会产生额外的空间

0 个答案: