html - 按钮与输入字段不一致

Question

https://jsfiddle.net/p5thLuwo/

我无法让我的提交按钮与表单中的输入字段对齐

HTML

<div class="row" align="center">
    <form id="form" name="form" style="width:80%">

        <div class="form-group col-md-6 col-sm-12 col-xs-12">
            <label for="ptxt">Name:</label> 
            <input id="ptxt" autocomplete="off" type="text" name="ptxt[]" placeholder="Part" class="form-control"/>
        </div>


        <div class="form-group col-md-2 col-sm6 col-xs-6">
            <label for="qtxt">Qty:</label> 
            <input id="qtxt" type="number" name="qtxt[]" placeholder="Quantity" value="1" min="0.5" class="form-control"/>
        </div>

        <div class="form-group col-md-2 col-sm6 col-xs-6">
            <label for="ctxt">Cost per Item:</label>
            <input id="ctxt" type="text" name="ctxt[]" class="form-control"  />
        </div>

            <button name="submit" id="submit" type="button" value="+" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span></button>

    </form>
</div>

如果我添加一个标签和与输入字段相同的属性，那么它的位置正确但太大而且我不想要/不需要标签

<div class="row" align="center">
<form id="form" name="form" style="width:80%">

    <div class="form-group col-md-6 col-sm-12 col-xs-12">
        <label for="ptxt">Name:</label> 
        <input id="ptxt" autocomplete="off" type="text" name="ptxt[]" placeholder="Part" class="form-control"/>
    </div>


    <div class="form-group col-md-2 col-sm6 col-xs-6">
        <label for="qtxt">Qty:</label> 
        <input id="qtxt" type="number" name="qtxt[]" placeholder="Quantity" value="1" min="0.5" class="form-control"/>
    </div>

    <div class="form-group col-md-2 col-sm6 col-xs-6">
        <label for="ctxt">Cost per Item:</label>
        <input id="ctxt" type="text" name="ctxt[]" class="form-control"  />
    </div>

    <div class="form-group col-md-2 col-sm6 col-xs-6">
        <label for="submit">.</label>
        <button name="submit" id="submit" type="button" value="+" class="btn btn-success form-control"><span class="glyphicon glyphicon-plus"></span></button>
    </div>

</form>
 </div>

总而言之，我试图让按钮看起来像第一张图片，但在第二张图片中对齐。

Answer 1

添加一个虚拟的 css 类(在本例中为 abc)

<div class="row" align="center">
    <form id="form" name="form" style="width:80%">

        <div class="form-group col-md-6 col-sm-12 col-xs-12">
            <label for="ptxt">Name:</label> 
            <input id="ptxt" autocomplete="off" type="text" name="ptxt[]" placeholder="Part" class="form-control"/>
        </div>


        <div class="form-group col-md-2 col-sm6 col-xs-6">
            <label for="qtxt">Qty:</label> 
            <input id="qtxt" type="number" name="qtxt[]" placeholder="Quantity" value="1" min="0.5" class="form-control"/>
        </div>

        <div class="form-group col-md-2 col-sm6 col-xs-6">
            <label for="ctxt">Cost per Item:</label>
            <input id="ctxt" type="text" name="ctxt[]" class="form-control"  />
        </div>
        <div class="form-group col-md-2 col-sm6 col-xs-6 abc">
           <button name="submit" id="submit" type="button" value="+" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span></button>
        </div>


    </form>
</div>

并给它 Margin top 作为 3%

.abc {
    margin-top: 3%;
}

这是一个jsfiddle https://jsfiddle.net/jk5hksue/