我有一个 div,其中我希望并排设置两个元素:搜索输入字段和相应的搜索提交按钮。
到目前为止,我已尝试使用以下代码完成此操作:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<div class="container w-100 mt-4 border-bottom pb-3 h-25 align-content-center" style="box-sizing: border-box;">
<div class="row">
<div class="col-1 position-relative d-flex align-items-center"><span class="mh-100" style="line-height: 1rem">Class20</span>
</div>
<div class="col-7 mw-100 align-items-center position-relative d-flex">
<form action="" class="justify-content-center position-relative m-0">
<input type="search" name="" value="" placeholder="search" class="w-100 align-items-center pl-3" id="search">
</form>
<button class="btn-outline-primary"type="submit">Search</button>
</div> <!--column 7-->
<div class="col-4">
<button class="btn-outline-primary"type="submit">Log In</button>
<button class="btn-outline-primary"type="submit">Sell your stuff</button>
</div> <!-- col-4 -->
</div> <!--row-->
</div>Run Code Online (Sandbox Code Playgroud)
d-flex 做我想要的。它将搜索字段和按钮并排放置。我遇到的问题是它还在该 div 和下一个 div 之间留下了大约 …
一直在互联网上搜寻,但我似乎找不到。这对于查找和替换数字(即 one|1)等情况非常有用。我想用一(1)替换。