Question

我的按钮被创建为相应行的每一列。但它们相互重叠，我只能看到最后创建的按钮。我的.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>

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%;

}

Answer 1

好吧，有几件事：

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

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

请查看此链接w3 schools positioning with css

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

我调整了您的代码，使其按您的意愿运行，并修复了您所犯的一些错误。见THIS小提琴如果您还有其他问题，我很乐意为您提供进一步的帮助。

Answer 2

我认为你可以解决你从班级中删除的问题。按钮：

position: absolute;

HTML表格列重叠

2 个答案: