Уменьшить отступ слева в сложенных вкладках

Question

У меня есть эта tab структура, основанная на jquery -ui.

Использование бита css

.ui-tabs-vertical {
    /* width: 55em; */
}

.ui-tabs-vertical .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left;
    width: 11em;
}

.ui-tabs-vertical .ui-tabs-nav li {
    clear: left; width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px .2em 0;
    border-radius: 4px;
}

.ui-tabs-vertical .ui-tabs-nav li a {
    display:block; }

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0;
    padding-right: .1em;
    border-right-width: 1px;
}
/*
.ui-tabs-vertical .ui-tabs-panel {
    padding: 1em;
    float: right;
}
*/
.ui-tabs .ui-tabs-nav {
    background:#FFFFFF !important;
    border: none;
}

В этом коде

<?php
$menu_array = array
  (
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-door-open"></i></span> Introductie',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-shield-alt"></i></span> Beveiliging',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-cog"></i></span> Instellingen',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fa fa-user"></i></span> Gebruikers',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-keyboard"></i></span> Invoer',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-bars"></i></span> Menu',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-phone-volume"></i></span> Terugbelverzoeken',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fas fa-wrench"></i></span> Taken',
    '<span style="display: inline-block; width:25px; text-align:center;"><i class="fa fa-building"></i></span> Relatiebeheer'
  );

?>

  <main id="main">

    <section id="about" class="about">

      <div class="container">

          <div class="col-lg-12 d-flex flex-column justify-content-center about-content">



            <div id="tabs" style="border: none;">

              <div class="row">
                  <div class="col-lg-2">
                      <ul>

                        <?php foreach($menu_array as $menu) { $i++; echo '<li><small><a href="#page_'.$i.'"><span style="display:inline-block; width:145px;">'.$menu.'</span></a></small></li>'; } ?>
                      </ul>
                  </div>

                  <div class="col-lg-10">

                     <?php foreach($menu_array as $menu)
                     {
                         $j++;

                         echo '<div id="page_'.$j.'">';
                         include('includes/portfolio_torza/page_'.$j.'.php');
                         echo '</div>';
                     }
                     ?>

                 </div>

            </div>

          </div>

      </div>
    </section>

  </main><!-- End #main -->

Я хотел бы уменьшить расстояние между рамкой и значком с левой стороны, чтобы получить этот результат

Как этого добиться?

(я использую width:25px; text-align:center;", чтобы центрировать все значки и расположить их в одной вертикальной линии)

Answer 1

Обновление

Для ваших якорей добавьте следующее CSS:

padding-left: 0;
width: 100%;

У вас уже есть существующие правила заполнения для следующего правила: .ui-tabs .ui-tabs-nav .ui-tabs-anchor {...}. Чтобы переопределить его, вы можете изменить padding-left там или добавить новое правило после него.

В вашем случае:

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  padding-left: 0;
  width: 100%;
}

Результат

---

Необходимо удалить левый отступ самого ul. Этот снимок экрана представляет стили браузера по умолчанию для неупорядоченных списков.