个人中心
gpt4 book ai didi

HTML 表格列重叠

转载 作者：太空宇宙 更新时间：2023-11-03 20:34:59 28 4
gpt4 key购买 nike

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

最佳答案

好的，有几件事:

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

    .button {
    position:absolute；
    顶部:0；右:0；底部:0；左:0；
    }

查看此链接 w3 schools positioning with css

  1. 您有几个语法错误的元素。例如，list-style 之间不需要空格。可能有效，但我认为最好不要这样做。

  2. 一些 CSS 属性对您放置它们的元素没有用处。喜欢把 list-style: none;在表格行上。

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

祝你好运!

关于HTML 表格列重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34755167/

28 4 0
文章推荐： python - 使用带有 graphql 查询的 API 在 R 上抛出 401 错误，但在 Python 上工作正常
文章推荐： c# - 使用企业库异常 block 的 WCF 异常屏蔽
文章推荐： python - 仅在按下特定按钮时打开文件目录，而不是自动打开
文章推荐： C#正则表达式问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com