在堆叠标签中减少 padding-left

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 -->

我想减少边框和左侧图标之间的 space，以获得此结果

如何实现？

（我正在使用 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 本身的左填充。此屏幕截图代表无序列表的默认浏览器样式。

在堆叠标签中减少 padding-left

Reduce padding-left in stacked tabs

css

jquery

jquery-ui

更新

结果