Question

＆＃13;

.button {
    display:block;
    text-align:center;
    margin: auto;
    padding-bottom: inherit;
    vertical-align: top;
}

.input-div {
  vertical-align: top;
  }

＆＃13;

<div class="form-group  field-plan">
				<label for="plan" class="col-sm-3 control-label">
					Current Plan
				</label>
				<div class="input-div col-sm-9">
					<p class="form-control-static control-field-plan">
					   20 alerts per day <br>	
                       0 out of 20 used
                      <span class="button">
                        <button class="change-button btn btn-success">
                          Change Plan
                        </button>
                      </span>
					</p>
				</div>
			</div>
			<div class="form-group payment_method field-payment_method">
				<label for="payment_method" class="col-sm-3 control-label">
					Payment
				</label>
				<div class="input-div col-sm-9">
					<p class="form-control-static control-field-payment_method">
                      Visa 4242 <br>
                      Next payment due: 2016-15-05
                      <span class="button">
                        <button class="update-card btn btn-success">
                          Update Card
                        </button>
                      </span>
					</p>
				</div>
			</div>

＆＃13;

我有以下HTML代码：

<div class="form-group  field-plan">
    <label for="plan" class="col-sm-3 control-label">
        Current Plan
    </label>
    <div class="input-div col-sm-9">
        <p class="form-control-static control-field-plan">
            {{get_current_plan current_customer.plan}}
            <button class="change-button btn btn-success">
                Change Plan
            </button>

        </p>
    </div>
</div>
<div class="form-group payment_method field-payment_method">
    <label for="payment_method" class="col-sm-3 control-label">
        Payment
    </label>
    <div class="input-div col-sm-9">
        <p class="form-control-static control-field-payment_method">
            {{get_payment_method current_customer.payment_method}}
            <button class="update-card btn btn-success">
                Update Card
            </button>
        </p>
    </div>
</div>

我的应用在按钮之前的两个{{...}}中显示文字。文本数量有所不同，有时可能超过几行。

按钮的位置似乎取决于文本的最后一行，因此按钮的位置变化很大，而且看起来不太好。

我对css知之甚少，但无法将按钮正确放置在每个div的第一行文本旁边。

任何人都可以指导我为此而烦恼吗？

Answer 1

更改了一点HTML结构。顺便说一下，我在Upwork

上为你的项目投标

HTML：

<div class="form-group  field-plan">
                <label for="plan" class="col-sm-3 control-label">
                    Current Plan
                </label>
                <div class="input-div col-sm-9">
                    <p class="form-control-static control-field-plan">
                       20 alerts per day <br>   
                       0 out of 20 used
                      <span class="button">
                        <button class="change-button btn btn-success">
                          Change Plan
                        </button>
                      </span>
                    </p>
                </div>
            </div>
            <div class="form-group payment_method field-payment_method">
                <label for="payment_method" class="col-sm-3 control-label">
                    Payment
                </label>
                <div class="input-div col-sm-9">
                    <p class="form-control-static control-field-payment_method">
                      Visa 4242 <br>
                      Next payment due: 2016-15-05
                      <span class="button">
                        <button class="update-card btn btn-success">
                          Update Card
                        </button>
                      </span>
                    </p>
                </div>
            </div>

CSS：

 .button {
        position:absolute;
        top:0;
        right:0;
    }
    .form-group{
      position:relative;
      width:300px;
    }
    .input-div {
      vertical-align: top;
      }

https://jsfiddle.net/fabian89/ndgx1drc/

Answer 2

我看到它的方式，有两种简单的方法可以做到这一点。

最简单，最简单的方法是创建一个2x2表。使用CSS可以轻松地操作单元格的样式和大小，就像使用.button一样。

我看到的另一种方式是，您可以为input-div col-sm-9类添加CSS，例如使用text-align进行垂直对齐。

查看http://www.w3schools.com/html/html_css.asp以了解有关CSS使用的更多信息。他们有很好的例子和教程。

希望这会帮助你！

Answer 3

如果我清楚你想要什么，我会建议为.button添加一些上边距，例如：margin-top：35px或2.7em。

水平对齐div内的按钮

3 个答案: