В списке тегов выровняйте диск по центру - PullRequest
Новая
       0

В списке тегов выровняйте диск по центру

0 голосов
/ 03 января 2019

Изображение Пробел между диском и текстом.В этом я буду использовать некоторые теги классов, некоторые стили CSS.Я использую визуальный код для редактирования этого кода. 

<section class="bg-light" id="team">
  <div class="container">
      <div class="row">
          <div class="col-lg-12 text-center">
              <h3 class="section-heading text-uppercase" style="color: black;font-size: 32px;font-weight: bold;">Our Amazing Team</h3>
              <h6 class="section-subheading text-muted" style="color:gray !important"><i>"Great things in business are never done by one person. They're done by a team of people" - Steve jobs</i></h6>
          </div>
      </div>
      <div class="row">
          <div class="col-lg-3">
              <div class="team-member">
                  <img class="mx-auto rounded-circle" src="img/team/Arun.jpg" alt="">
                  <h4 style="font-size: 25px;"><a href="arunrana.html"><b style="color: black">Arun  </b></a></h4>
                  <p class="text-muted">Founder & Lead DevOps</p>
                  <ul style="font-size: 12px;">  
                    <li>B.E. (Computer Engg.)</li>
                    <li>10 Years of Experience</li>
                  </ul>
               </div>
          </div>
      </div>
  </div>

Ответы [ 5 ]

0 голосов
/ 03 января 2019 

li span { position: relative; left: -10px; }
<div class="row">
          <div class="col-lg-3">
              <div class="team-member">
                  <img class="mx-auto rounded-circle" src="img/team/Arun.jpg" alt="">
                  <h4 style="font-size: 25px;"><a href="arunrana.html"><b style="color: black">Arun  </b></a></h4>
                  <p class="text-muted">Founder & Lead DevOps</p>
                  <ul style="font-size: 12px;">  
                    <li><span>B.E. (Computer Engg.)</span></li>
                    <li><span>10 Years of Experience</span></li>
                  </ul>
               </div>
          </div>
      </div>

Пожалуйста, используйте span внутри li

CSS: 

<style>
         li span { position: relative; left: -10px; }
     </style>

HTML: 

<div class="row">
          <div class="col-lg-3">
              <div class="team-member">
                  <img class="mx-auto rounded-circle" src="img/team/Arun.jpg" alt="">
                  <h4 style="font-size: 25px;"><a href="arunrana.html"><b style="color: black">Arun  </b></a></h4>
                  <p class="text-muted">Founder & Lead DevOps</p>
                  <ul style="font-size: 12px;">  
                    <li><span>B.E. (Computer Engg.)</span></li>
                    <li><span>10 Years of Experience</span></li>
                  </ul>
               </div>
          </div>
      </div>

Выходное изображение:

enter image description here

0 голосов
/ 03 января 2019

Это выглядит как текст по центру

Попробуйте добавить класс text-left в ul

<div class="team-member">
                  <img class="mx-auto rounded-circle" src="img/team/Arun.jpg" alt="">
                  <h4 style="font-size: 25px;"><a href="arunrana.html"><b style="color: black">Arun  </b></a></h4>
                  <p class="text-muted">Founder & Lead DevOps</p>
                  <ul class="text-left" style="font-size: 12px;">  
                    <li>B.E. (Computer Engg.)</li>
                    <li>10 Years of Experience</li>
                  </ul>
               </div>
0 голосов
/ 03 января 2019

вы можете использовать отрицательный текстовый индекс как text-indent: -6px; в теге li для удаления пробела.

0 голосов
/ 03 января 2019

Пожалуйста, попробуйте этот код 

<html>
<head>
    <style>
        ul {
            list-style-position: inside;
            padding-left: 0;
        }
        li span{
            position: relative; left: -10px;
        }
    </style>

</head>    

<body>
    <div class="row">
        <div class="col-lg-3">
            <div class="team-member">
                <img class="mx-auto rounded-circle" src="img/team/Arun.jpg" alt="">
                <h4 style="font-size: 25px;"><a href="arunrana.html"><b style="color: black">Arun  </b></a></h4>
                <p class="text-muted">Founder & Lead DevOps</p>
                <ul style="font-size: 12px;">  
                    <li><span>B.E. (Computer Engg.)</span></li>
                    <li><span>10 Years of Experience</span></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
0 голосов
/ 03 января 2019

Использовать текстовый отступ 

li {
  text-indent: -10px;
}
<section class="bg-light" id="team">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h3 class="section-heading text-uppercase" style="color: black;font-size: 32px;font-weight: bold;">Our Amazing Team</h3>
        <h6 class="section-subheading text-muted" style="color:gray !important"><i>"Great things in business are never done by one person. They're done by a team of people" - Steve jobs</i></h6>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-3">
        <div class="team-member">
          <img class="mx-auto rounded-circle" src="img/team/Arun.jpg" alt="">
          <h4 style="font-size: 25px;"><a href="arunrana.html"><b style="color: black">Arun  </b></a></h4>
          <p class="text-muted">Founder &amp; Lead DevOps</p>
          <ul style="font-size: 12px;">  
            <li>B.E. (Computer Engg.)</li>
            <li>10 Years of Experience</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...