尝试在同一行左右浮动,无法准确地正确地进行 clearfix。
表格向下移动,没有问题,但 p-tag 和搜索框在同一行不匹配。这实际上是基本的事情,但需要帮助。抱歉,添麻烦了。
.clearfix::after {
content: "";
clear: both;
display: table;
}
.row {
width: 50%;
margin: 0 auto;
padding: 100px;
color: #395870;
}
.nav-p {
float: left;
color: #395870;
}
.search-box {
float: right;
}
<body>
<div class="row">
<p class="nar-p"><i class="fa fa-building" style="font-size:24px"></i>販売概要</p>
<div class="clearfix">
<form action="{{ route('search.route')}}" method="any" role="search" class="search-box">
{{csrf_field()}}
<input type="text" name="q" class="search" placeholder="町, 地域, 会社名, 物件名" onfocus=" ">
<input type="submit" name="submit" class="submit" value="検索">
</form>
</div>
<table>
<tr>
<th scope="row">物件名</th>
<td>{{$estates->building_name}}</td>
</tr>
<tr>
</table>
</div>
</body>
最佳答案
将html代码nar-p
改为nav-p
.clearfix::after {
content: "";
clear: both;
display: table;
}
.row {
width: 50%;
margin: 0 auto;
padding: 100px;
color: #395870;
}
.nav-p {
float: left;
color: #395870;
}
.search-box {
float: right;
}
<body>
<div class="row">
<p class="nav-p"><i class="fa fa-building" style="font-size:24px"></i>販売概要</p>
<div class="clearfix">
<form action="{{ route('search.route')}}" method="any" role="search" class="search-box">
{{csrf_field()}}
<input type="text" name="q" class="search" placeholder="町, 地域, 会社名, 物件名" onfocus=" ">
<input type="submit" name="submit" class="submit" value="検索">
</form>
</div>
<table>
<tr>
<th scope="row">物件名</th>
<td>{{$estates->building_name}}</td>
</tr>
<tr>
</table>
</div>
</body>
关于html - clearfix问题,在同一行匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52888233/