Проблема с исправлением тега имени рядом с изображением - PullRequest
Новая
       18

Проблема с исправлением тега имени рядом с изображением

0 голосов
/ 03 августа 2020 
<ul class="child ">
               <div  style="text-align:right;"> <li class="nameBar">{{patientInfo.data.fname}} {{patientInfo.data.lname}}</li></div>
                <li class="age">{{patientInfo.data.age}}|{{ patientInfo.data.gender}}</li>
                <img class="breadcrumb-image" src="assets/images/user/user6.jpg" alt="...">
                <li class='uhid'>UHID: {{patientInfo.data.uhid}}</li>
                <li class="address">{{patientInfo.data.city}}</li>
            </ul>

CSS: 

.nameBar{
  color:#00bcd4;
  font-weight:bold;  
  margin: -7px 0px 0px -100px;
  position: absolute;
  font-size: 12px;
  text-transform: capitalize;
}
.uhid{
  margin:-39px 0px 0px 58px;
  color:#00bcd4;
  font-weight:bold;
  font-size: 12px;
}
.age{
  margin: 15px 0px 0px -35px;
  font-size: 10px;
  position: absolute; 
 
}
.address{
  margin: 4px 0px 0px 59px;
  font-size: 10px;
}

.child {
  position: fixed;
  top: 72px;
  left: 50px;
  padding: 1em;
  margin: 0px 0px 0px 571px;
 
}

.li{
  border-width: 1px;
  text-align:center;   
  float:left;
}

image 1 short name

изображение 2 длинное имя

Мне всегда нужно начинать имя с правой стороны изображения, которое я пробовал с margin-right: cal c (50% - (somePx)) не может исправить это имя, ярлык рядом с изображение справа Uhid и место может мне помочь в этом спасибо

1 Ответ

1 голос
/ 03 августа 2020

не рекомендуется использовать слишком много полей и абсолютное позиционирование.

взгляните на это и измените его по своему усмотрению. 

.child {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1em;
  display: flex;
  justify-content: center;
}

.child>img {
  width: 40px;
  height: 40px;
  margin: 0 5px;
}

.nameBar {
  text-transform: capitalize;
}

.bold {
  color: #00bcd4;
  font-weight: bold;
  font-size: 12px;
}

.small {
  font-size: 10px;
}

.left,
.right {
  line-height: 20px;
  padding-top: 5px;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}
<div class="child">
  <div class="right">
    <div class="nameBar bold">John Doe</div>
    <div class="age small">26 Male</div>
  </div>
  <img src="https://picsum.photos/40" alt="...">
  <div class="left">
    <div class='uhid bold'>UHID: 1234</div>
    <div class="address small">Paris</div>
  </div>
</div>
...