Question

美好的一天。我在使用标签内容区域的一个面板中正确呈现内容时遇到问题。它在我的小提琴中看起来很好：http://jsfiddle.net/Del087/9yptj2nj/但是，它在我的网站上无法正确呈现。如果你看这里http://www.realtimehockey.net/canlan.html并查看第二个标签“青年经典”，你应该明白我的意思。理想情况下，我试图让前两个元素与两个元素下方的第三个元素水平对齐。我确信这是一个相当容易的修复但是，我似乎无法弄明白。任何帮助将不胜感激。感谢。

CSS

<style> td, tr {
border-style: none
}
A {
text-decoration:none
}
a:link {
color: #0000ff;
}
a:visited {
color: #0000ff:
}
a:hover {
color: #ff6600;
}
</style> <style> .tabs input[type=radio] {
display:none;
text-decoration: none;
}
.tabs {
width: 730px;
height: 1100px;
float: none;
list-style: none;
position: relative;
padding: 0px;
margin-right: 5px;
margin: 5px;
margin-top: 2px;
}
.tabs li {
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
color: #FFFFFF;
font-family: patua one;
font-style: italic;
font-size: 14px;
background: linear-gradient(#151515, #080808);
cursor: pointer;
position: relative;
}
.tabs label:hover {
background: #ff6600;
}
.tab-content {
z-index: 2;
display: none;
left: 0;
font-size: 20px;
line-height: 140%;
padding: 5px;
width: 725px;
margin-right: 5px;
position: absolute;
box-sizing: border-box;
border:3px solid #454545;
border-top: 7px solid #454545;
background-color:#080808;
}
[id^=tab]:checked + label {
background: #ff6600;
color: white;
top: 0;
}
[id^=tab]:checked ~[id^=tab-content] {
display: block;
}
</style> <style> #table-wrapper {
position:relative;
}
#table-scroll {
height:965px;
width: auto;
overflow:auto;
margin-top:2px;
}
#table-wrapper table {
width:auto;
}
#table-wrapper table * {
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:auto;
}
</style> <style> .table2 {
margin-top: 10px;
}
</style>

The HTML

<ul class="tabs">
<li>
    <input type="radio" checked name="tabs" id="tab1">
    <label for="tab1">Tournaments</label>
    <div id="tab-content1" class="tab-content">
        <div id="OrgsAtoD56_5439" align=center x:publishsource="Excel">
            <div id="table-wrapper">
                <div id="table-scroll">
<iframe frameborder="0" height="630" scrolling="no"    src="https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214256&authkey=ADHo6NDfwBXvj5k&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AF36&wdHideGridlines=True" width="695"></iframe>
                </div>
            </div>
        </div>
    </div>
</li>
<li>
    <input type="radio" name="tabs" id="tab2">
    <label for="tab2">Youth Classic</label>
    <div id="tab-content2" class="tab-content">
        <div id="table-wrapper">
            <iframe src="https://scorestream.com/widgets/scoreboards/vert?userWidgetId=1317" style="padding:7px;border:0px;width:350px;height:600px;max-height:600px;" title="Realtime sports scoreboard widget" scrolling="no" frameBorder="0"></iframe>
            <table border="3" bordercolor="080808" padding="1px" align="right" class="table2">
                <tr>
                    <td><a href="http://s1314.photobucket.com/user/RTH13/media/AdsWebsite/Canlan600200_zpszbaycily.jpg.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/AdsWebsite/Canlan600200_zpszbaycily.jpg" border="0" alt=" photo Canlan600200_zpszbaycily.jpg"/></a>

                    </td>
                </tr>
            </table>
            <br>
            <iframe width="664" height="300" style="padding-left:10px;" frameborder="0" scrolling="no" src="https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214321&authkey=ADVLgs4SS_FHqAY&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AG57&wdHideGridlines=True"></iframe>
        </div>
    </div>
</li>
<li>
    <input type="radio" name="tabs" id="tab3">
    <label for="tab3">Niagara Falls Youth Challenge</label>
    <div id="tab-content3" class="tab-content">
        <div id="table-wrapper">
            <div id="table-scroll"> <a href="http://www.realtimehockey.net/associations.html" target="_parent"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/RTHConstruction_zpsbyvi5c0d.png" width="720px" border="0" alt=" photo RTHConstruction_zpsbyvi5c0d.png"/></a>

            </div>
        </div>
    </div>
</li>
<li>
    <input type="radio" name="tabs" id="tab4">
    <label for="tab4">King/Rings I</label>
    <div id="tab-content4" class="tab-content">
        <div id="table-wrapper">
            <div id="table-scroll"> <a href="http://www.realtimehockey.net/associations.html" target="_parent"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/RTHConstruction_zpsbyvi5c0d.png" width="720px" border="0" alt=" photo RTHConstruction_zpsbyvi5c0d.png"/></a> 
            </div>
        </div>
    </div>
</li>
<li>
    <input type="radio" name="tabs" id="tab5">
    <label for="tab5">King/Rings II</label>
    <div id="tab-content5" class="tab-content">
        <div id="table-wrapper">
            <div id="table-scroll"> <a href="http://www.realtimehockey.net/associations.html" target="_parent"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/RTHConstruction_zpsbyvi5c0d.png" width="720px" border="0" alt=" photo RTHConstruction_zpsbyvi5c0d.png"/></a> 
            </div>
        </div>
    </div>
</li>
<li>
    <input type="radio" name="tabs" id="tab6">
    <label for="tab6">CANADA O to Y</label>
    <div id="tab-content6" class="tab-content">
        <div id="table-wrapper">
            <div id="table-scroll"> <a href="http://www.realtimehockey.net/associations.html" target="_parent"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/RTHConstruction_zpsbyvi5c0d.png" width="720px" border="0" alt=" photo RTHConstruction_zpsbyvi5c0d.png"/></a> 
            </div>
        </div>
    </div>
</li>

Answer 1

您在tab2上的realtimehockey上的表格嵌入了额外的

<div style="overflow:auto">
    <table>....</table>
</div>

表包装器中的

元素（在第一个iframe之后）。默认情况下，浏览器在div元素之前和之后插入换行符。删除这个额外的div元素，它将像jsfiddle一样工作。你可以应用styl =“display：inline;”到这个div，它也会工作。

选项卡式内容区域中的内容呈现

1 个答案: