Question

我正试图让我的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>

Answer 1

您需要将边距清零。将其添加到您的CSS：

body {
    margin:0px;
}

Answer 2

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

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

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

此示例导致标签宽度均匀。要使标签的大小与文本标签成比例，请删除width属性：

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

关于使用类的说明......根据定义，类是应用于多个元素的一组属性。当你递增课程时，你错误地使用它们。您永远不应该在CSS中有一个包含索引编号的元素列表。我已经从你的代码中删除了所有这些疯狂。

如何让我的标签在顶部100％？

2 个答案: