时间戳

首页 > 解决方案 > 在页脚标签中，即图像的最后，我想要一个在左边（紧急联系人）和另一个在右边（在线顾问）？？？怎么做？

css - 在页脚标签中，即图像的最后，我想要一个在左边（紧急联系人）和另一个在右边（在线顾问）？？？怎么做？

问题描述

在页脚，我想要一个在左边（紧急联系人），另一个在右边 

<!Doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css\font-awesome.min.css">
  <title>Welcome to Login</title>
  <link rel="stylesheet" type="text/css" href="css\style.css">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <img class="bgimg" src="images\bg5.jpg" />
      <div class="lgform">
        <div class="lglogo col-md-12">
          <font class="col-md-6" face="Times New Roman" size="48px">MAS</font>
          <img class="logo col-md-6" src="images\logo2.png" />
        </div><br><br><br>
        <div>
          <i class="fa fa-id-card col-md-2" style="font-size:20px;color:green"></i>
          <select class="col-md-9">
            <option>Select a Document</option>
            <option>id number</option>
          </select>
        </div><br>
        <div>
          <i class="fa fa-user-o col-md-2" style="font-size:20px;color:green"></i>
          <input class="col-md-9" type="number" placeholder="Number Document" />
        </div><br>
        <div>
          <i class="fa fa-key col-md-2" style="font-size:20px;color:green"></i>
          <input class="col-md-9" type="password" placeholder="Password" />
        </div><br>
        <div>
          <center>
            <a href="index.html">
              <input class="btn btn-primary col-md-6" type="submit" value="LOGIN" style="font-weight:bold" />
            </a>
          </center>
          <center>
            <a href="registration.html">
              <br><input class="btn btn-danger col-md-6" type="submit" value="Create an Account! New User?" style="font-weight:bold" />
            </a>
          </center>
        </div><br>
        <div class="col-md-7" style="margin-left:100px">
          <a href="forgotpsw.html">¿Forgot Password?</a>
          <a href="help.html" style="float:right">¿Help?</a>
        </div><br><br>
      </div>
      <footer>
        <div class="container-fluid">
          <div class="row">
            <div class="float-left" style="position:relative">
              <p class="p1 col-lg-6">(91)+8313285202</p><br>
              <h5><i class="fa fa-phone-square col-lg-6" style="color:red">EMERGENCY CONTACT</i></h5>
            </div>
            <br><br>
            <div class="float-right" style="position:relative">
              <p class="p2 col-lg-6">(91)+MAS@GMAIL.COM</p><br>
              <h5><i class="fa fa-check col-lg-6" style="color:green">ONLINE CONSULTANT</i></h5>
              </font>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </div>
</body>

</html>

标签： csshtmlbootstrap-4

解决方案

这是问题的解决方案：

<footer>
    <div class="container-fluid">
        <div class="float-left">
            <p class="p1 col-lg-6">(91)+8313285202</p>
            <br>
            <h5><i class="fa fa-phone-square col-lg-6" style="color:red">EMERGENCY CONTACT</i></h5>
        </div>

        <div class="float-right">
            <p class="p2 col-lg-6">(91)+MAS@GMAIL.COM</p>
            <br>
            <h5><i class="fa fa-check col-lg-6" style="color:green">ONLINE CONSULTANT</i></h5>
        </div>
    </div>
</footer>

我删除了<div>with 类row，也删除了style="position:relative使用divandfloat-left的float-right。

我还稍微整理了代码。这是我的 Codepen 显示工作代码：https ://codepen.io/CodeBoyCode/pen/gBQVWR

推荐阅读