html - 无法在 css div 中选择输入表单

Question

刚得到一个 jquery 响应式菜单选项卡，但是当我想将其与表单一起使用时，我无法选择表单来插入值。我认为这可能是我无法找到的 css 问题。

请帮帮我。

这是HTML代码

<div class="container">

    <header>
        <h1>Editing </h1>
        <p><a href="../home/">Back to home</a></p>
    </header>

===========

从这里我不能选择任何内容

        <span id="one" class="anchor"></span>
        <div class="panel">
            <a class="tab-link" href="#one">Status</a>
            <div><p>



            <form method="post" action="">
        <table width="250">
            <tr>
                <td>First Name:</td>
                <td><input type="text" name="id" value="name" /></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" name="edit" value="Edit" /></td>
            </tr>
        </table>
    </form>

            </p>
            </div>
        </div>

        <span id="two" class="anchor"></span>
        <div class="panel">
            <a class="tab-link" href="#two">Balance</a>
            <div>
                <p>Sed mauris eros, accumsan consectetur tempor quis, pulvinar non mi. Etiam placerat ipsum a felis convallis quis aliquet lacus gravida. Cras eget sapien arcu, a pellentesque elit. Duis porttitor urna et velit convallis fringilla. Sed eu porttitor lorem. Aliquam erat volutpat. Etiam egestas pulvinar eros vel convallis. Phasellus viverra posuere nibh vitae luctus.</p>

                <p>Proin eget nibh ante, ac vulputate felis. Donec aliquet, est sagittis ultricies faucibus, enim tortor malesuada dui, vel tincidunt mauris ipsum at metus. Donec non nunc augue. Ut purus tortor, mattis sit amet suscipit at, volutpat ac justo. Morbi facilisis enim nec leo iaculis aliquam. Vestibulum tempor magna sed ligula consequat sit amet congue est eleifend. Fusce faucibus hendrerit convallis.</p>
            </div>
        </div>

        <span id="three" class="anchor"></span>
        <div class="panel">
            <a class="tab-link" href="#three">Info</a>
            <div>
                <p>Vestibulum porta venenatis odio, eu iaculis urna iaculis ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In tempor, arcu vitae tristique gravida, nibh tortor suscipit sapien, euismod lacinia diam orci id turpis. Fusce ut rutrum lacus. Pellentesque vitae nisi et ipsum posuere eleifend at at magna.</p>

                <p>Vestibulum libero nibh, rhoncus quis euismod sit amet, mattis sed mauris. Aliquam in quam nisl, non cursus diam. Nam hendrerit, quam eget rhoncus rhoncus, eros est tincidunt tortor, quis posuere purus est vel nunc. Pellentesque hendrerit semper nisl a feugiat. Mauris suscipit eros vel neque ultricies hendrerit.
            </div>
        </div>

        <span id="four" class="anchor"></span>
        <div class="panel">
            <a class="tab-link" href="#four">Pic</a>
            <div>
                <p>Sed aliquam, erat eget ornare semper, ipsum nisl tristique velit, ac commodo turpis lacus vel ipsum. In accumsan scelerisque lacus quis consectetur. In lobortis volutpat metus, eget rutrum metus viverra.</p>

                <p>Phasellus dui ligula, imperdiet quis porta id, sagittis ac sapien. Nam mi risus, posuere et tempus ac, lobortis et justo. Cras molestie iaculis nisl et tempus. Sed interdum, ante eget rhoncus semper, tortor velit suscipit enim, vitae sollicitudin libero metus a sem. Quisque consequat porta purus, et suscipit enim porttitor hendrerit.</p>
            </div>
        </div>

    </article>


</div>

这是我的CSS

@charset "utf-8";
/* CSS Document */

.container {
    width: 100%;
    max-width: 960px;
    margin: 50px auto;
    font: 90% arial;
}

article, header {
    display: block;
}

header h1, header p {
    margin:0 auto;
    position:relative;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    margin-top: 10px;
}

header a {
    text-decoration:none;
}

a:hover {
    text-decoration:underline;
}

.tabs {
    width: 100%;
    max-width: 600px;
    background: #ccc;
    margin: 50px auto 0;
    position: relative;
}

    span.anchor {
        position: fixed;
        display: none;
    }

    .panel div {
        opacity:0;
        background: #eee;
        float: left;
        width: 100%;
        position: absolute;
        top: 19px;
        left: 0;
        padding: 10px;
        box-sizing: border-box;
        line-height: 1.5em;
        border-radius: 5px;
        border-top-left-radius: 0;
        -webkit-transition: all 0.6s ease;
        -moz-transition: all 0.6s ease;
        -ms-transition: all 0.6s ease;
        -o-transition: all 0.6s ease;
        transition: all 0.6s ease;
    }

        .panel .tab-link {
            margin-top: -20px;
            float: left;
            width: 20%;
            padding: 10px;
            background: #eee;
            margin-right: .5%;
            text-decoration: none;
            box-sizing: border-box;
            font-weight: bold;
            font-size: 1.1em;
            color: #333;
            text-align: center;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            -webkit-transition: all 0.6s ease;
            -moz-transition: all 0.6s ease;
            -ms-transition: all 0.6s ease;
            -o-transition: all 0.6s ease;
            transition: all 0.6s ease;
        }

            .panel .tab-link:visited {
                color: #333;
            }

    .anchor:target + .panel div {
        opacity: 1;
        background: #ccc;
    }

        .anchor:target + .panel .tab-link {
            background: #ccc;
        }

@media screen and (max-width:300px) {

    .panel .tab-link {
        font-size: 0.8em;
        padding: 12px 10px 12px 10px;
    }

}

请帮我修复..

Answer 1

这是一个假设，因为您实际上没有添加 fiddle 供我们彻底检查，

但我假设您有其他元素绝对定位在您的表单上，这些元素正在窃取点击。

这是显而易见的，因为您在 .panel div 选择器上有一个 position:absolute 属性，还有一个 top:0。鉴于此规则将捕捉多个面板及其 div，可以安全地假设您有一些相互堆叠。

你需要重新考虑你的 CSS，这样你就不会在你的元素上堆叠。

您可以通过在 chrome 中打开页面、右键单击一个元素、选择检查元素并查看选择了哪个元素来测试这是否属实。

如果选择的元素与您所想的不同，则需要将其从表单上移走。

不在我的脑海中:将 position:relative 添加到 .panel 可能会有所帮助。或者可能删除 div 上的绝对定位。