gpt4 book ai didi

html - 如何在第二部分 html css 的顶部添加部分?

转载 作者:行者123 更新时间:2023-11-28 16:51:30 24 4
gpt4 key购买 nike

我想将 search-from 放在第二部分 section seller-listings 的顶部

像这样

enter image description here

这是我的搜索表单,顶部是灰色:

enter image description here

我已经尝试将 position:absoulte 赋给 search-block 但它看起来像这样

enter image description here

这是我的 HTML 代码:

完整代码

<body>

<!-- Navigation -->
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navigation">
<a href="/" class="navbar-brand">
<img src="images/site-logo.png">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fas fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto main-nav">
<li class="nav-item">
<a class="nav-link" href="#">Buy bitcoins</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sell bitcoins</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Post a trade</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mt-10">
<li class="nav-item">
<a class="nav-link login-button" href="#">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link register-button" href="#">Register</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</section>

<!-- Hero -->
<section class="hero text-center">
<div class="container">
<div class="content-block">
<h1>Buy and sell bitcoins near you</h1>
<h2>Instant. Secure. Private.</h2>
<h4 class="mb-4">Trade bitcoins in <span>7824 cities</span> and <span>248 countries</span> including <span>Pakistan.</span></h4>
<a href="/" class="btn btn-primary btn-lg">Sign up free</a>
</div>

<!-- Search -->
<div class="search-block">
<div class="search-form">
<form>
<div class="inner-form">
<div class="input-field first-wrap">
<input class="form-control mb-2 mr-sm-2 mb-sm-0" id="search" type="text" placeholder="Amount">
</div>
<div class="input-field second-wrap">
<select class="form-control mb-2 mr-sm-2 mb-sm-0">
<option>PKR</option>
<option>Example</option>
<option>Example</option>
<option>Example</option>
<option>Example</option>
</select>
</div>
<div class="input-field third-wrap">
<select class="form-control mb-2 mr-sm-2 mb-sm-0">
<option>Pakistan</option>
<option>Example</option>
<option>Example</option>
<option>Example</option>
<option>Example</option>
</select>
</div>
<div class="input-field fouth-wrap">
<select class="form-control mb-2 mr-sm-2 mb-sm-0">
<option>All online offers</option>
<option>Example</option>
<option>Example</option>
<option>Example</option>
<option>Example</option>
</select>
</div>
<div class="input-field fifth-wrap">
<button class="btn-search" type="button">Search</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>

<section class="seller-listings section bg-gray">
<div class="container">
<div class="row">
<table class="table">
<thead class="black white-text">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</body>

Edit

我通过提供 search-block position: relative 解决了这个问题。

谢谢!

最佳答案

如果有人遇到同样的问题。您可以通过添加 postion: relative;

.search-block {
position: relative;
}
来解决这个问题

它会出现在顶部:

enter image description here

谢谢

关于html - 如何在第二部分 html css 的顶部添加部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58857379/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com