Question

我想将我的搜索框定位为： 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>

Answer 1

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

Answer 2

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

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

无法定位搜索框

2 个答案: