我有两个 CodePens，它们在 HTML 和 CSS 中是相同的，但它们在浏览器中有不同的输出 window

Question

我正在创建一个调查表 (CodePen A)，但我无法让该表显示在屏幕中央。为了专注于问题，我分叉了代码笔 (CodePen B) 并删除了与问题无关的所有内容。然后我开始尝试使用 CSS 直到我（最终）让表格在屏幕上居中并按照我想要的方式进行格式化。

然后，通过复制和粘贴，我将我的解决方案集成回调查表（CodePen A）中。令我惊讶的是，调查表与我在 CodePen B 中创建的完全不同。因此，我重复上述步骤，将调查表分叉到另一个 CodePen (CodePen C) 中。然后我尝试在 CodePen C 中重新创建我的解决方案。

CodePen B 和 C 的 HTML 和 CSS 看起来相同，但它们的输出 windows 看起来非常不同。我有两个问题：

可能出了什么问题？
我该如何解决这个问题？

问题中的两个CodePen是：

CodePen B：https://codepen.io/ThomasDirkse/pen/vYZVZeg

<html lang="en">
    <div class="wrapper">
        <form class="survey-form">
            <div class="survey-questions">
                <label id="name-label" for="name">Name</label>
                <input id="name" type="text" class="input-fields" placeholder="My name" required/>
            </div>
        </form>
    </div>
</html>

*, *:before, *:after {
    box-sizing: border-box;
}

.survey-form {
    display: inline-block;
    width: 500px;
    border: 5px solid #235495;
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    float: center;
    background-color: #A6C9E3;
    background-size: contain;
}

.input-fields {
    width: 100%;
    height: 40px;
    padding: 5px 0 5px 10px;
    color: #495057;
    background-color: #fff;
    border: 2px solid #235495;
    border-radius: 5px;
    text-align: left;
}

label { 
    color: #235495; 
    font-weight: bold; 
    display: block; 
    float: left; 
    padding: 5px 0 5px 0;
} 

.wrapper {
    text-align: center;
}

CodePen C: https://codepen.io/ThomasDirkse/pen/eYRPxZR

CodePen C的

HTML和CSS同上

如果您能提供任何帮助，我将不胜感激！非常感谢。

托马斯。

Answer 1

您正在使用 id 而不是 class 作为值 survey-form

<html lang="en">
    <div class="form-wrapper">
        <form class="survey-form">
            <div class="survey-questions">
                <label id="name-label" for="name">Name</label>
                <input id="name" type="text" class="input-fields" placeholder="My name" required/>
            </div>
        </form> 
    </div>
</html>

Answer 2

“Codepen C”中的主要问题似乎是您使用的是 ID 而不是 class。 ID 在页面上是唯一的，最多只能应用于一个元素，而 class 选择器可以应用于多个元素。

/* Codepen C */

.survey-form {
    display: inline-block;
    width: 500px; /* Changed to 500px instead of 50% to align with Codepen B (500px is not equivalent to 50%) */ 
    border: 5px solid #235495;
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    float: center;
    background-color: #A6C9E3;
    background-size: contain;
}

<!--Codepen C-->
<html lang="en">
    <div class="form-wrapper">
        <form class="survey-form">
            <div class="survey-questions">
                <label id="name-label" for="name">Name</label>
                <input id="name" type="text" class="input-fields" placeholder="My name" required/>
            </div>
        </form> 
    </div>
</html>

我有两个 CodePens，它们在 HTML 和 CSS 中是相同的，但它们在浏览器中有不同的输出 window

I have two CodePens that are identical in HTML and CSS but they have a different output in the browser window

html

css

forms

codepen