javascript - 我如何将此代码中的选项卡居中？

Question

我仍然不是最擅长制作自己的 Material 的人，所以我一直在通过尝试围绕免费使用的代码进行编辑来学习。但是，我遇到了一个具体的问题。

虽然我在 (Forumotion) 上使用它的网站确实摆脱了您可能会在这里看到的奇怪的空白区域。尽管我已经搜索了很多解决方案并调整了 CSS，但我无法让选项卡居中，否则整个事情都会变得不稳定。

我已经在 Forumotion 和 JSFiddle 中对此进行了多次调整，以查看问题是否出在 Forumotion 上。然而，似乎没有任何效果。我在想这可能是我对 CSS 和 HTML 或最初制作它的人缺乏完整的知识和理解，但我将不胜感激任何人可以提供的帮助。

SOURCE CODE

jQuery(document).ready(function() {
  jQuery('.tabs .tab-links a').on('click', function(e) {
    var currentAttrValue = jQuery(this).attr('href');

    // Show/Hide Tabs
    jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault();
  });
});

.tabs {
  width: 100%;
  display: inline-block;
}

.tab-links:after {
  display: block;
  clear: both;
  content: '';
}

.tab-links li {
  margin: 0px 5px;
  float: left;
  list-style: none;
}

.tab-links a {
  padding: 10px 15px;
  display: inline-block;
  background: #7FB5DA;
  font-size: 14px;
  font-weight: 600;
  color: #4c4c4c;
  transition: all linear 0.15s;
}

.tab-links a:hover {
  background: #a7cce5;
  text-decoration: none;
}

li.active a,
li.active a:hover {
  background: #fff;
  color: #4c4c4c;
}

.tab-content {
  padding: 15px;
  border-radius: 3px;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
  background: #fff;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab #1</a></li>
    <li><a href="#tab2">Tab #2</a></li>
    <li><a href="#tab3">Tab #3</a></li>
    <li><a href="#tab4">Tab #4</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <p>Tab #1 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
    </div>

    <div id="tab2" class="tab">
      <p>Tab #2 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod
        tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
    </div>

    <div id="tab3" class="tab">
      <p>Tab #3 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
    </div>

    <div id="tab4" class="tab">
      <p>Tab #4 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod
        tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
    </div>
  </div>
</div>

Answer 1

使用 display:inline-block 和 text-center 检查这个，你可以制作居中标签

jQuery(document).ready(function() {
  jQuery('.tabs .tab-links a').on('click', function(e) {
    var currentAttrValue = jQuery(this).attr('href');

    // Show/Hide Tabs
    jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault();
  });
});

.tabs {
  width: 100%;
  display: inline-block;
}

.tab-links{
text-align:center;
padding-left:0px;}

.tab-links:after {
  display: block;
  clear: both;
  content: '';
}

.tab-links li {
  margin: 0px 5px;
  display:inline-block;
  list-style: none;
}

.tab-links a {
  padding: 10px 15px;
  display: inline-block;
  background: #7FB5DA;
  font-size: 14px;
  font-weight: 600;
  color: #4c4c4c;
  transition: all linear 0.15s;
}

.tab-links a:hover {
  background: #a7cce5;
  text-decoration: none;
}

li.active a,
li.active a:hover {
  background: #fff;
  color: #4c4c4c;
}

.tab-content {
  padding: 15px;
  border-radius: 3px;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
  background: #fff;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab #1</a></li>
    <li><a href="#tab2">Tab #2</a></li>
    <li><a href="#tab3">Tab #3</a></li>
    <li><a href="#tab4">Tab #4</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <p>Tab #1 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
    </div>

    <div id="tab2" class="tab">
      <p>Tab #2 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod
        tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
    </div>

    <div id="tab3" class="tab">
      <p>Tab #3 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
    </div>

    <div id="tab4" class="tab">
      <p>Tab #4 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod
        tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
    </div>
  </div>
</div>