html - 无法放置搜索框

我想将搜索框定位为：

但是，我的CSS产生了这个：

我的CSS：

body{
background-color: #DBDBDB;
}

.headerMenu{

background-image: url(../img/headerMenu.png);
height: 50px;
border-top: 0px;
border-bottom: 0px;
padding-top: 0px;
padding-left: auto;
padding-right: auto;
width: 100%
}

#wrapper{
background-image: url(../img/headerMenu.png);
margin-right: auto;
margin-left: auto;
width: auto;
padding-top: 0px;
padding-bottom: 0px;

}

.logo{
padding-top: 10px;
padding-left: 110px;
width: 80px;
}
.logo img{

width: 150px;
height: 38px;
}

.search-box{
position: absolute;
top: 20px;
bottom: 20px;
left: 80px;
}

#search input[type="text"]{
background:  url("../img/search_white.png") no-repeat 350px 6px #ffffff;
font: Arial;
outline: none;
border: none;
font: bold 12px;
width: 350px;
padding-left: 10px;
 }
#search input[type="text"]:focus {
background:  url("../img/search_dark.png") no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 350px;
}

怎么了？我只是无法移动搜索框。好像卡住了。我尝试使用排名指标，但找不到出路。

HTML：

<!doctype html>

<head>
    <title>iFriendify</title>
    <link rel="stylesheet" type="text/css" href="./css/normalize.css">
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>

<body>

    <div class="headerMenu">
        <div id="wrapper">
            <div class="logo">
                    <img src="./img/logo.png"/>
            </div class="search-box">
                <form action="search.php" method="GET" id="search">
                    <input type="text" name="q" size="60" placeholder="Search! "/>

                </form>
            <div>



            </div>
        </div>
    </div>


</body>

最佳答案

在.headerMenu中设置position: relative或在.logo上使用float:left

关于html - 无法放置搜索框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25181372/