css - 尝试在标签旁边对齐输入字段

问题描述

我正在尝试获取标签旁边的输入字段框。截至目前，当您单击 Item#1 和 Invoice Number 时，会出现两行，其中包含我的输入字段和标签。文本（标签）和输入字段之间有一个间隙，我希望输入字段就在标签旁边。有人可以帮帮我吗？我在下面提供了一个 jsfiddle 示例：

https://jsfiddle.net/silosc/7amzvfL6/6/

这是代码：

<div class="accordion" id="accordion1">
   <div class="accordion" id="accordion1">

    <div class="accordion-group">
        <div class="accordion-heading" id="item1" onclick="changeIcon('item1')">
            <p class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                <i class="fa fa-angle-down" onclick="changeIcon('id')">
                    Item #1
                </i>
            </p>
        </div>
        <div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
            <div class="accordion-inner">
                <div class="accordion" id="accordion2">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneOne">
                                <i class="fa fa-angle-down">
                                    Invoice number:
                                </i>
                            </a>
                        </div>
                        <div id="collapseOneOne" class="accordion-body collapse" style="height: 0px;">
                            <div class="accordion-inner">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label>Tracking #:</label>
                                        <input />
                                    </div>
                                    <div class="col-sm-4">
                                        <label>From Street:</label>
                                        <input />
                                    </div>
                                    <div class="col-sm-4">
                                        <label> To Street:</label>
                                        <input />
                                    </div>
                                </div>
                                <br />
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label>Div. Code #:</label>
                                        <input />
                                    </div>
                                    <div class="col-sm-4">
                                        <label>Invoice #:</label>
                                        <input />
                                    </div>
                                    <div class="col-sm-4">
                                        <label> Bill Date:</label>
                                        <input />
                                    </div>
                                </div>
                                <br />
</div>


<Style> 
   .row label{
        display: inline-block;
        text-align: right;
        float: left;
        margin: 0 auto;
        width: 210px;

    }

    .row input{
        display: inline-block;
        text-align: left;
        float: right;
        margin: 0 auto;
        width: 210px;

    }
    .dropbtn {
        background-color: orangered;
        color: white;
        padding: 16px;
        font-size: 12px;
        cursor: pointer;
        border: none;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

            .dropdown-content a:hover {
                background-color: #f1f1f1
            }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }

    .btn {
        background-color: orangered;
        color: white;
        padding: 16px;
        font-size: 20px;
        cursor: pointer;
        border: none;
        border-radius: 16px;
    }

        .btn:hover {
            background-color: #3e8e41;
            color: white;
        }

    .accordion-heading a {
        color: black;
        font-weight: bold;
        font-size: 25px;
    }

    .accordion-heading p {
        font-weight: bold;
        font-size: 25px;
    }

    .accordion-inner label {
        font-size: 20px;
    }

    .commentbox {
        align-content: center;
    }
</Style>

标签： cssbootstrap-4

css - 尝试在标签旁边对齐输入字段

问题描述

解决方案

推荐阅读