html - 这里如何在右侧显示文字？

Question

我有这个网站:link

该网站的结帐页面我想以正确的形式“电话”显示文本，如下图所示。

这是表单的代码:

<p class="form-row form-row-last validate-required validate-phone woocommerce-invalid woocommerce-invalid-required-field" id="billing_phone_field">
    <label for="billing_phone" class="">Phone <abbr class="required" title="required">*</abbr></label>
    <input type="text" class="input-text " name="billing_phone" id="billing_phone" placeholder="" value="">
</p>

我试过这样修改代码

<p class="form-row form-row-last validate-required validate-phone woocommerce-invalid woocommerce-invalid-required-field" id="billing_phone_field"><label for="billing_phone" class="">Phone <abbr class="required" title="required">*</abbr></label><input type="text" class="input-text " name="billing_phone" id="billing_phone" placeholder="" value="">
<p style="float: left;">text</p></p>

你知道我如何在那里安排文本吗？为什么不去？

编辑:通过:dgdesign

Answer 1

只要放一个inline element在右边，例如一个 small 标签:

<p>
<label for="billing_phone">
      Phone <abbr class="required" title="required">*</abbr>
</label>
<input 
      type="text" 
      class="input-text " 
      name="billing_phone" 
      id="billing_phone" 
      placeholder="" value="">
    <label for="billing_phone" class="">
        <small class="some-class"> Phone </small>
    </label>
</p>

并添加一些填充:

small.some-class {  padding: 20px; }

Demo here