Question

因此，我有一个标题，其中包括标题和带有灰色背景的搜索栏。我需要对此做出响应，以得出375px的移动尺寸。注销部分也位于标题上，但不属于标题div。

<div class="logout">
  <a href ="#logout"> Log out</a>
</div>
<img src="images/logo.jpeg" alt="The Open University logo">
<div class="header">
  <h1>Test website</h1>
  <input type="text" placeholder="Search..">
</div>

我在这里也有一个图片，它位于左上角，我不确定在电话视图中呈现此图片的最佳方法。当我在手机视图中滚动时，搜索栏和注销将在滚动时跟随页面...我想，基本上我需要一个接一个的东西。我将在下面包含每个CSS。

.header {
 background-color: #f1f1f1;
 padding: 30px;
  text-align: center;
}


.header input[type=text] {
 padding: 3px;
 border-style: solid;
 border-color: black;
 margin: 10px;
 font-size: 17px;
 width: 20%;
 position:fixed; top:0; right:0;
}

img {
float: left;
padding: 2px;
width: 150px;
height: 100px;
}

h1 {
font-size: 2rem;
margin: 0.25rem 0;
font-family: Helvetica, Arial, Sans-serif;
 }

对于我使用过的页面上的其他媒体查询

  @media only screen and (max-width: 375px) {

非常感谢您的帮助，谢谢！

使带有搜索栏的标题响应

0 个答案: