如何让我的标签 100% 显示在顶部？答案

【问题标题】：How do I get my tabs to go 100% across the top?如何让我的标签 100% 显示在顶部？
【发布时间】：2014-10-14 05:04:59
【问题描述】：

我试图让我的 jQuery 选项卡一直穿过顶部并在左右两侧与边缘对齐，我尝试做固定宽度，但它似乎不想那样合作.有谁知道如何做到这一点？当您单击选项卡时它也会不断跳动，我看到这是因为它们通过将选项卡向下移动到边框上来隐藏内容的边框......无论如何都可以在不移动选项卡本身的情况下将选项卡连接到内容并创造这种跳跃？

http://jsfiddle.net/fun6faos/2/

<style>
.tabs-all {
    width: 830px;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.etabs {
    margin: 0;
    padding: 0;
    width: 100%;
}
.tab-container .panel-container {
    background: #fff;
    border: solid #c2c2c2 1px;
    padding: 10px;
}
.panel-container {
    margin-bottom: 10px;
}

.tab1 {
    width: 209px;
    display: inline-block;
*display:inline;
    background: #fff;
    border-bottom: none;
}
.tab2 {
    width: 233px;
    display: inline-block;
*display:inline;
    background: #fff;
    border-bottom: none;
}
.tab3 {
    width: 124px;
    display: inline-block;
*display:inline;
    background: #fff;
    border-bottom: none;
}
.tab4 {
    width: 207px;
    display: inline-block;
*display:inline;
    background: #fff;
    border-bottom: none;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tab1.active, .tab2.active, .tab3.active, .tab4.active {
    background: #fff;
    padding-top: 6px;
    position: relative;
    top: 1px;
    border-color: #c2c2c2;
    border-top: 5px solid #70bf47;
    border-right: solid 1px #c2c2c2;
    border-left: solid 1px #c2c2c2;
}
.tab1 a, .tab2 a, .tab3 a, .tab4 a {
    font-size: 15px;
    line-height: 2em;
    display: block;
    padding: 0 10px;
    outline: none;
    text-decoration: none;
    color: #464646;
    font-weight: 600;

}
.tab1 a:hover, .tab2 a:hover, .tab3 a:hover, .tab4 a:hover {
    text-decoration: none;
}
.tab1 a.active, .tab2 a.active, .tab3 a.active, .tab4 a.active {
    text-decoration: none;
    color: #464646;
}
</style>
<script type="text/javascript">
    $(document).ready( function() {
      $('#tab-container').easytabs();
    });
  </script>
</head>
<body>
<div class="tabs-all">
<div id="tab-container" class='tab-container'>
  <ul class='etabs'>
    <li class='tab1'><a href="#tabs1">What is Community Solar?</a></li>
    <li class='tab2'><a href="#tabs2">Why Clean Energy Collective?</a></li>
    <li class='tab3'><a href="#tabs3">How it Works?</a></li>
    <li class='tab4'><a href="#tabs4">Community Solar Benefits</a></li>
  </ul>
  <div class='panel-container'>
    <div id="tabs1">
      <h2>TITLE</h2>
      <p>Information</p>
    </div>

    <div id="tabs2">
      <h2>TITLE</h2>
      <p>Information</p>
    </div>

    <div id="tabs3">
       <h2>TITLE</h2>
      <p>Information</p>
    </div>

    <div id="tabs4">
       <h2>TITLE</h2>
      <p>Information</p>
    </div>
  </div>
</div>
</div>

【问题讨论】：

标签： javascript jquery html alignment jquery-ui-tabs

【解决方案1】：

从 Bootstrap 的标签中获取提示，我们可以使用 CSS 应用表格布局属性：

li.tab {display: table-cell; width: 1%;}

http://jsfiddle.net/isherwood/fun6faos/15

此示例生成统一的选项卡宽度。要使标签的大小与其文本标签成比例，请删除 width 属性：

http://jsfiddle.net/isherwood/fun6faos/17

关于使用类的注意事项...根据定义，类是应用于多个元素的一组属性。当您增加课程时，您错误地使用了它们。你的 CSS 中不应该有一个包含索引号的元素列表。我已经从你的代码中去掉了所有这些疯狂的东西。

【讨论】：

糟糕。那里有一个糟糕的小提琴链接。
谢谢。有没有办法根据其中内容的长度使选项卡的宽度不同？就像它的工作原理比为什么要清洁能源集体要小得多，并且不需要那么多的宽度，所以没有文字换行？以及如何使选项卡上的底部边框在其处于活动状态时不显示，使其看起来像一块？
查看我对标签宽度问题的更新答案。考虑到 Web 的状态、响应式行为是新规范和广泛的设备，我不会花太多时间为此烦恼。
我的意思是我不希望内容的顶部边框在标签处于活动状态时显示在标签下方，如果这有意义的话。所以看起来活动选项卡在其他选项卡的前面？也许在选项卡上设置一个 z-index 以便它显示在内容框上方并阻挡内容和选项卡之间的线？
我看到它在 Firefox 中是这样的。 Chrome 和 IE11 都可以。

【解决方案2】：

您需要将边距归零。将此添加到您的 CSS：

body {
    margin:0px;
}

【讨论】：

这似乎没有回答这个问题。也许你误会了。