HTML表格列重叠

Question

HTML表格列重叠

我的按钮被创建为相应行的每列.但它们相互重叠,我只能看到最后创建的按钮.我的.css存在一些问题,但我无法弄清楚是什么.我是HTML新手,CSS非常感谢您的帮助

的test.html

<html>
<link href="button_style.css" rel="stylesheet" type="text/css" />

<body>
    <table align="center" id="scroll_tbl">
        <tr>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-right:20px;">
                <a href='javascript:prevClick()'><img src="img/arrow_left.png" class="arrow" border="0" />&nbsp;Previous</a>
            </td>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left:20px;">
                <a href='javascript:nextClick()'>Next&nbsp;<img src="img/arrow_right.png" class="arrow" border="0" /></a>
            </td>
        </tr>
        <tr>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-right:20px;">
                <a href="#" class="button"><span>Follow</span></a>
            </td>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left:20px;">
                <a href="#" class="button"><span>Follow</span></a>
            </td>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left:20px;">
                <a href="#" class="button"><span>Follow</span></a>
            </td>
        </tr>
        <tr>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-right:20px;">
                <a href="#" class="button"><span>Follow</span></a>
            </td>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left:20px;">
                <a href="#" class="button"><span>Donate</span></a>
            </td>
        </tr>
        <!--<div id="prev_next" style="background-color: #FF0000;  display: inline-block;"> <div id="previous" style="display:inline-block;">Previous</div><div id="Next" style="display:inline-block;">Next</div></div>-->
        <!--<div id='prev_next' style='background-color: #FF0000; display:inline-block; '><a href='javascript:prevClick()'><img src="img/arrow_left.png" class="arrow" border="0" /> Previous</a> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; <a href='javascript:nextClick()' width='100'>Next <img src="img/arrow_right.png" class="arrow" border="0" /></a></div>-->
    </table>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

button_style.css

    @import url(http: //fonts.googleapis.com/css?family=Nunito:300);

    body {
        font - family: "Nunito", sans - serif;
        font - size: 24 px;
    }
    a {
        text - decoration: none;
    }
    p {
        text - align: center;
    }
    sup {
        font - size: 36 px;
        font - weight: 100;
        line - height: 55 px;
    }

    .button {
        text - transform: uppercase;
        letter - spacing: 2 px;
        text - align: center;
        color: #0C5;

        font-size: 24px;
        font-family: "Nunito", sans-serif;
        font-weight: 300;

        margin: 5em auto;

        position: absolute; 
        top:0; right:0; bottom:0; left:0;

        padding: 20px 0;
        width: 220px;
        height:30px;

        background: # 0 D6;
        border: 1 px solid #0D6;
        color: # FFF;
        overflow: hidden;

        transition: all 0.5 s;
    }

    .button: hover, .button: active {
        text - decoration: none;
        color: #0C5;
        border-color: # 0 C5;
        background: #FFF;
    }

    .button span {
        display: inline - block;
        position: relative;
        padding - right: 0;

        transition: padding - right 0.5 s;
    }

    .button span: after {
        content: ' ';
        position: absolute;
        top: 0;
        right: -18 px;
        opacity: 0;
        width: 10 px;
        height: 10 px;
        margin - top: -10 px;

        background: rgba(0, 0, 0, 0);
        border: 3 px solid# FFF;
        border - top: none;
        border - right: none;

        transition: opacity 0.5 s,
        top 0.5 s,
        right 0.5 s;
        transform: rotate(-45 deg);
    }

    .button: hover span, .button: active span {
        padding - right: 30 px;
    }

    .button: hover span: after, .button: active span: after {
        transition: opacity 0.5 s,
        top 0.5 s,
        right 0.5 s;
        opacity: 1;
        border - color: #0C5;
        right: 0;
        top: 50%;

Run Code Online (Sandbox Code Playgroud)

}

Answer 1

Fra*_* W. 5

好吧,有几件事:

按钮重叠的主要原因是因为您有以下代码:

.button { position:absolute; top:0; right:0; bottom:0; left:0; }

看看这个链接w3学校用css定位

你有一些语法错误的元素.例如,不需要列表样式之间的间距.可能会工作,但我认为最好不要这样做.
某些CSS属性对您放置它们的元素没有用处.喜欢把list-style:none; 在一排桌子上.

我调整了你的代码,使它按你想要的方式工作,并修复了你所犯的一些错误.看到这个小提琴如果您有任何其他问题,我很乐意为您提供进一步的帮助.

祝好运!

归档时间：	10 年，5 月前
查看次数：	1905 次
最近记录：	8 年，2 月前