Question

出于某种原因，每当我尝试移动它时，我的搜索框就会卡在我的徽标下面。这是我的代码

.searchbox{
    position: absolute;
    top:50px;
    right: 50px;
}

我的HTML

    <div class="headerMenu">
            <div id="wrapper"">
                <div class="logo">
                    <img src="./img/logo.png" />
                        <div class="seachbox">
                        <p style="margin-right: 1px;"></p>
                            <form action="search.php" methond="GET" id="search" >
                                    <input type ="text" name="q" size"60" placeholder="Find Surfers...">

我的徽标css没有位置：亲戚

.logo{
    width: 125px;
}
.logo img{
    width: 150px;
height: 38px;
padding-top: 5px;
}

Answer 1

这可能是因为.logo有position: relative;。从.logo div中删除搜索框。这不是徽标的一部分，是吗？

做这样的事情

＆＃13;

header{
  width: 100%;
  height: 70px;
  background-color: #eee;
  position: relative;
  padding: 25px 0;
}
header #logo{
  width: 150px;
  height: 60px;
  background-color: orange;
  line-height: 60px;

}
header #searchbox{
  position: absolute;
  top: 50px;
  right: 50px;
}

＆＃13;

<header>
   <div id="logo">Logo</div>
    <input type="text" id="searchbox" value="Search...">
</header>

＆＃13;

HTML / CSS帮助我无法定位搜索框

1 个答案: