Jquery 减少堆叠选项卡中的剩余填充

我有一个基于jqueryui的

选项卡

结构

使用一点

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

更新
对于您的锚，添加以下
CSS
：

padding-left: 0;
width: 100%;

您已经有以下规则的现有填充规则：
.ui tabs.ui tabs nav.ui tabs anchor{…}
。要覆盖它，您可以更改此处的
左侧填充
，或在其后面添加新规则

就你而言：

.ui选项卡.ui选项卡导航.ui选项卡定位{
左侧填充：0；
宽度：100%；
}


结果


您需要删除
ul
本身的左填充。此屏幕截图表示无序列表的默认浏览器样式

您正在使用引导程序吗？另外，请在
元素上添加
style=“padding left:5px；”“
以增加空间，而不要使用PHPAn快速测试来发布呈现的HTML。但如何减少。将其添加到
元素会更改框的大小。如果您可以提供指向实时代码的链接，我可能会在一两分钟内解决此问题。感谢您花时间更新您的答案。我可能误解了你。这不会改变填充
.ui选项卡锚定{左填充：0；宽度：100%；}
@Muiter它被更长的
CSS
规则覆盖。在我的屏幕截图中，我对内联元素进行了更改，这就是它工作的原因。您必须匹配已有的
CSS
选择器，或者使用
！重要信息
@Muiter再次更新了答案。