html - clearfix问题,在同一行匹配

标签 html css

尝试在同一行左右浮动,无法准确地正确地进行 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/

相关文章:

javascript - 试图将 google 图表与 css 对齐

html - 标题下方的 slider 在 ionic 3 中没有任何空格

javascript - Google Allo 风格撰写消息区

css - 苹果风格的弹出动画/缓动?

html - 如何防止在响应式网页上水平滚动?

html - 如何绘制对 Angular 线 div?

html - 一种简单的 html/css 表格对齐方式

javascript - Kendo ASP.NET MVC 包装器限制

html - CSS 背景图像

javascript - 标题的固定高度和变化宽度(HTML 表格)