javascript - 如何在此代码中将标签居中？

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

当我在（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>

最佳答案

使用display：inline-block和text-center进行检查，您可以将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>