CSS - 对齐段落时出现的问题

Question

嗨我用了两个文本框。一个用于显示国家/地区代码，另一个用于获取手机号码，此处我想在电话号码字段下方显示一条消息。但它开始出现在国家代码中。所以我想显示从商务电话tet盒开始的消息表单。请帮我。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.paperindex.com/css/paperindex.min.css" rel="stylesheet">
<div class="phone-verify-two">
  <h4>Update your main business phone</h4>
  <div class="form-group">
    <input class="form-control input-lg" required="required" type="number" placeholder="+91"><i aria-hidden="true" class="fa fa-minus minus"></i>
    <input class="form-control input-lg step3-phone main-business-before" maxlength="20" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" placeholder="Main Business Phone" required="required" type="tel">
  </div>
  <p class="clr-red">Don't add your country code or international dialing code here.</p>
</div>

Answer 1

添加单独的列以获取国家/地区代码和电话号码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://cdn.paperindex.com/css/paperindex.min.css" rel="stylesheet">
        <div class="phone-verify-two">
          <h4>Update your main business phone</h4>
          <div class="form-group">
           <div class="col-md-3">
            <input class="form-control input-lg" required="required" type="number" placeholder="+91"><i aria-hidden="true" class="fa fa-minus minus"></i>
           </div>
           <div class="col-md-9">
            <input class="form-control input-lg step3-phone main-business-before" maxlength="20" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" placeholder="Main Business Phone" required="required" type="tel">
            <p class="clr-red">Don't add your country code or international dialing code here.</p>
          </div>
        </div>
    </div>

Answer 2

只需在代码.clr-red{margin-left:13%}中添加此CSS

Answer 3

将CSS位置设置为绝对值并调整左侧属性直到您满意为止。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.paperindex.com/css/paperindex.min.css" rel="stylesheet">
<div class="phone-verify-two">
  <h4>Update your main business phone</h4>
  <div class="form-group">
    <input class="form-control input-lg" required="required" type="number" placeholder="+91"><i aria-hidden="true" class="fa fa-minus minus"></i>
    <input class="form-control input-lg step3-phone main-business-before" maxlength="20" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" placeholder="Main Business Phone" required="required" type="tel">
  </div>
<style>
div.absolute {
position: absolute;
left: 125px;
}
</style>
  <div class="absolute">    <p class="clr-red">Don't add your country code or international dialing code here.</p>
</div></div>