时间戳

首页 > 解决方案 > 编辑文本位置，尽管文本长度

html - 编辑文本位置，尽管文本长度

问题描述

我试图制作一个带有按钮的课程列表来注册该课程。我试图让这个按钮保持在它的位置，并在它靠近按钮时让文本进入一个新行（不是在图片下，而是在 Certificat .... 下）

截屏

.paddtext{
padding-left:10%;
}

.inline{
display: inline;

}

.preview {
    height: 120px;
    width: 170px;
    margin-left: 5%;
}

.coursprev{
    margin-top: 2%;
    border-radius: 25px;
  border: 2px solid #1b1b1a;
  padding-top: 5px;
  padding-bottom: 5px;
 
}

.joincourse{
    margin-left: 15%;
}
<div class="coursprev">
<img class ="preview" src="../../../media/img/python.png" alt="PreviewVideo"> 
<h6 class="nomCertif paddtext inline">Certificat : [FETCH NOM CERTIF] 
 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h6>   
<a class="button-highlight joincourse" href="#">Commencer!</a> 
</div><br>

<div class="coursprev">
<img class ="preview" src="../../../media/img/python.png" alt="PreviewVideo"> 
<h6 class="nomCertif paddtext inline">Certificat : [FETCH NOM CERTIF] 
</h6>   
<a class="button-highlight joincourse" href="#">Commencer!</a> 
</div><br>

标签： htmlcss

解决方案

只需用, ,描述您的.coursprev课程：diplay: flex;justify-content: space-between;align-items: center;

.coursprev {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  margin-top: 2%;
  border-radius: 25px;
  border: 2px solid #1b1b1a;
  padding-top: 5px;
  padding-bottom: 5px;
}

然后针对你的情况做具体的调整。

推荐阅读