Question

这是之前发布的问题的延续：Center a table and align right a div。在上一个问题中，j08691提供了一个完美的解决方案，可以使一个表居中并对齐一个div。但是现在我遇到了pageDiv和PageLinks元素相互叠加的问题，如果我把它们放在外表中的话。请参阅此示例：http://jsfiddle.net/hockchailim/uECFg/4/。有没有办法自动扩展外表以防止这种叠加？

<table id="outerTable" border="1">
<tbody>
    <tr>
        <td>
            <div id="pagingDiv" style="width:100%;">
                <div id="goToPage" style="float:right">&nbsp; Page 3 of 42 | Page#:
                    <input style="height:14px;width:21px;" /> <a href="#go">GO</a>

                </div>
                <table id="pageLinks" style="margin:auto;">
                    <tbody>
                        <tr>
                            <td> <a href="#first" title="Click to go to first page.">1</a>
                            </td>
                            <td> <a href="#first" title="Click to go to second page.">2</a>
                            </td>
                            <td> <a href="#first" title="Click to go to second page.">3</a>
                            </td>
                            <td> <a href="#first" title="Click to go to second page.">4</a>
                            </td>
                            <td> <a href="#first" title="Click to go to second page.">5</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            This is too short,  <br/> 
            it caused goToPage and pageLinks <br/>
            on previous cell is overlaying each other
        </td>
    </tr>    
</tbody>                
</table>

Answer 1

这就是你要追求的吗？我从Div的

中移除了定位

#pagingDiv {

}
#goToPage {

    right:0;
}

http://jsfiddle.net/uECFg/6/

Answer 2

这样做适合你吗？我删除了一些样式

#goToPage {
    position:relative;
    margin-left:0;
    margin-right:0;
    float:right;
}

http://jsfiddle.net/uECFg/9/ [] [1]

[1]：http://jsfiddle.net/uECFg/9/＆lt; ------ UPDATE

自动扩展外表以防止由于位置叠加：绝对

2 个答案: