尝试将标签旁边的输入字段对齐

我正在尝试在标签旁边输入字段框。截至目前,当您单击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.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>
tecie88986 回答:尝试将标签旁边的输入字段对齐

由于您使用的是引导程序,因此需要使用以下内容:

<div class="form-group row">
    <label class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" class="form-control">
    </div>
</div>

删除不必要的自定义样式。

,

一种选择是将form-row网格自动布局列用于标签/输入。这使标签列适合其内容。但是,每个连续的行都不会与相邻的行对齐...

<div class="form-row">
    <label class="col-form-label col-sm-auto">Tracking #:</label>
    <input class="col" />
    <label class="col-sm-auto">From Street:</label>
    <input class="col" />
    <label class="col-sm-auto">To Street:</label>
    <input class="col" />
</div>
<br />
<div class="form-row">
    <label class="col-form-label col-sm-auto">Div. Code #:</label>
    <input class="col" />
    <label class="col-sm-auto">Invoice #:</label>
    <input class="col" />
    <label class="col-sm-auto">To Bill Date:</label>
    <input class="col" />
</div>

另一种选择是将form-row经典网格列用于标签/输入。这样可以使每一行对齐,然后text-right将标签保持在右侧...

<div class="form-row text-right">
    <label class="col-form-label col-sm-2">Tracking #:</label>
    <input class="col" />
    <label class="col-sm-2">From Street:</label>
    <input class="col" />
    <label class="col-sm-2">To Street:</label>
    <input class="col" />
</div>
<br />
<div class="form-row text-right">
    <label class="col-form-label col-sm-2">Div. Code #:</label>
    <input class="col" />
    <label class="col-sm-2">Invoice #:</label>
    <input class="col" />
    <label class="col-sm-2">To Bill Date:</label>
    <input class="col" />
</div>

两个选项的演示:https://www.codeply.com/p/BJaILw8HQ4

本文链接:https://www.f2er.com/3108222.html

大家都在问