html - 将输入字段放入图像中

Question

我有一张看起来像这样的图片:

( can't embed images yet )

我想在相对于文本的每一行添加一个字段，并在图像底部的中心添加一个按钮。即:

First name: [First name here]
Last name:  [Last name here ]
Email:      [Email address  ]

      [Submit button]

我的问题是我不知道该怎么做，我试过这样做:

<style>
    .input-image {
        background: url("images/INPUT_GRAPHIC.png");
        min-height: 380px;
        background-position: left;
        background-repeat: no-repeat;
        background-size: unset;
        padding-top: 50px;
    }  
    .btn {
        background-color: #565258;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.9;
        position: absolute;
    }

    .btn:hover {
        opacity: 1;
    }
</style>
<div class="bg-image"></div>
<div class="input-image">
    <form action="/form_to_email.php">
        <div class="input-img">
            <div class="containter">
                <input type="text" placeholder="Enter First Name" name="first_name" class="first-name-input" required>
                <input type="text" placeholder="Enter Last Name" name="last_name" class="last-name-input" required>
                <input type="text" placeholder="Enter Email" name="email" class="email-address-input" required>
                <button type="submit" class="btn">Submit to be inspired</button>
            </div>
        </div>
    </form>
</div>
<div class="info-image">
    <img src="images/INFO_GRAPHIC2.png"/>
</div>

但这并没有显示正确的方式，我怎样才能在图片中适当的文本旁边添加字段？

Answer 1

有几种方法可以做你想做的事。你可以使用绝对位置，你可以将你的标签和输入内容包装到一个 div、section 等中。

例如，对于绝对位置，您可以使用下面的这种方法将输入和按钮置于屏幕中心；

.container {
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

为了在文本标签旁边有输入字段，您可以添加标签

<label for="enter-first-name">Enter Fist name</label>
<input id="enter-first-name" type="text" name="first_name" class="first-name-input" required>

重要的是添加输入的 id 和 for 属性，以便标签知道应该在哪个输入旁边呈现。

如果你想让标签和输入使用整行。 您可以添加 display: block 到您的输入和 float: left 以使标签位于输入的左侧。

input { 
    display: block; 
}

label {
    float: left;
}

作为最佳实践，您应该使用输入和标签上使用的类名，而不仅仅是 css 上的输入。在您的 css 文件中使用“输入”和“标签”将使您所有的输入和标签以相同的方式运行。而是使用类名。

编辑

在此链接中，您可以找到很多有关将 div 在屏幕上居中的帮助信息。 它超出了必要的范围，但绝对可以帮助您集中精力。 CSS-trick Centering CSS complete guide