时间戳

首页 > 解决方案 > 在引导卡中设置边距时面临的问题

html - 在引导卡中设置边距时面临的问题

问题描述

我正在开发一个移动网站（360x640）。

首先，我无法在与占星家的谈话部分用文字填充右侧的空白处。我无法在右侧移动 25 年的文字。

其次，我无法将 font awesome 与 text 对齐。有人可以帮助我设置边距，使其看起来与我想要的完全相似吗？

第三，我想要 <i class="fas fa-phone-alt"></i>的很棒的电话字体不起作用，

我想达到什么目的？？

在此处输入图像描述

我的前端

在此处输入图像描述

请帮助实现我想要的！！！！ 

body {
  margin-left: 20px;
  margin-top: 20px;
  margin-right: 20px;
  font-size: 30px;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(241, 241, 241);
  color: orangered;
  text-align: center;
  font-size: 30px;
}

.experience {
  float: right;
}

.orange {
  background-color: #f78336;
  font-size: 30px;
  color: white;
}

i {
  color: #f78336;
}

.call-btn {
  background-color: #f78336;
  padding: 15px;
  margin-left: 40px;
  width: 300px;
  box-shadow: 5px 10px #c8c8c8;
}
<!doctype html>
<html lang="en">

<head>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="../assets/talk.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <title>Talk to an Astrologer</title>
</head>

<body>


<!-- Search bar-->
<div class ="search-bar sticky-top " >
<ul class="navbar navbar-light bg-light justify-content-end ">
    <a class="navbar-brand " href="# ">
      <img src="../assets/search.png " width="30 " height="30 " alt=" ">
    </a>
    <a class="navbar-brand " href="# ">
        <img src="../assets/filter.png " width="30 " height="30 " alt=" ">
      </a>
      <a class="navbar-brand " href="# ">
        <img src="../assets/sort.png " width="30 " height="30 " alt=" ">
      </a>
</ul>

</div>


<!--- MAIN SECTION   -->
<div class="main mb-3 ">
<h1><b>Talk to an Astrologer</b></h1>

<div class="card flex-row flex-wrap mb-3 mx-3 ">
    <div class="card-header border-0 ">
        <img src="//placehold.it/200 " width="200 " height ="200 " alt=" ">
    </div>
    <div class="card-block mx-2 ">
        <span style ="float: right; "class ="experience ">25 years</span> 
        <h2 class="card-title "><b>Arvind Shukla</b></h2>
      
        <p class="card-text "><i class="fas fa-user "></i>Cofee Cup Reading ,<br>Falit Jyotish,Kundali Grah Dosh,<br>Vastu,Astrology,Vedic Astrology,<br>Palmistry,Numerology,Face<br> Reading,Tarot</p>
        <p class="card-text "><i class="fas fa-om "></i>English,Hindi</p>
        <p class="card-text "><i class="fas fa-money-bill-wave "></i><b>₹100/Min</b></p>
        <a href="# " class="btn orange call-btn ; "> <i class="fas fa-phone " style = color:white></i>Talk on Call</a>
       
    </div>
</div>


</div>
</div>
</body>

</html>

标签： htmlcss

解决方案

你可以试试下面的代码。它并不完美，但我猜它还可以。

body {
  margin: 0px;
  font-size: 30px;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(241, 241, 241);
  color: orangered;
  text-align: center;
  font-size: 30px;
}


.orange {
  background-color: #f78336;
  font-size: 30px;
  color: white;
}

i {
  color: #f78336;
}

.call-btn {
  background-color: #f78336;
  padding: 15px;
  margin-left: 40px;
  width: 300px;
  box-shadow: 5px 10px #c8c8c8;
}

.card{
  max-width: 750px;
  width: auto;
}

.fas,.fa{
  margin-right: 10px;
}

<!doctype html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./style.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <title>Talk to an Astrologer</title>
</head>

<body>


<!-- Search bar-->

<ul class="navbar navbar-light bg-light justify-content-between">
  
  <h1><b>Talk to an Astrologer</b></h1>
  <div>
    <a class="navbar-brand " href="# ">
      <img src="../assets/search.png " width="30 " height="30 " alt=" ">
    </a>
    <a class="navbar-brand " href="# ">
        <img src="../assets/filter.png " width="30 " height="30 " alt=" ">
      </a>
      <a class="navbar-brand " href="# ">
        <img src="../assets/sort.png " width="30 " height="30 " alt=" ">
      </a>
  </div>

   
</ul>




<!--- MAIN SECTION   -->
<div class="main mb-3 ">

<div class="card flex-row flex-wrap mb-3 justify-content-between" >
  
    <div class="card-header border-0 w-1/4">
        <img src="//placehold.it/200 "alt=" ">
    </div>
    <div class="card-block flex justify-content-between w-3/4 mx-auto">
        <span style ="float: right; "class ="experience text-center">25 years</span> 
        <h2 class="card-title "><b>Arvind Shukla</b></h2>
      
        <p class="card-text "><i class="fas fa-user "></i>Cofee Cup Reading ,<br>Falit Jyotish,Kundali Grah Dosh,<br>Vastu,Astrology,Vedic Astrology,<br>Palmistry,Numerology,Face<br> Reading,Tarot</p>
        <p class="card-text "><i class="fas fa-om "></i>English,Hindi</p>
        <p class="card-text "><i class="fas fa-money-bill-wave"></i><b>₹100/Min</b></p>
        <a href="# " class="btn orange call-btn ; "> <i class="fa fa-phone " style = color:white></i>Talk on Call</a>
       
    </div>
</div>
</div>
</div>
</body>
</html>

推荐阅读