无法定位搜索框

时间:2014-08-07 11:29:12

标签: html css

我想将我的搜索框定位为:enter image description here

但是,我的CSS正在产生这个:enter image description here

我的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>

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

将菜单页眉的位置更改为相对位置。 当父元素具有静态位置时,子元素的绝对位置将不起作用

您也可以不使用位置移除位置并在徽标上添加浮动。