Question

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

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

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：块，然后在左侧浮动：将标签移到输入的左侧。

input { 
    display: block; 
}

label {
    float: left;
}

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

编辑

在此链接上，您可以找到很多有关在屏幕上居中显示div的帮助。它超出了必要的范围，但绝对可以帮助您使内容居中。 CSS-trick Centering CSS complete guide

在图像中放置输入字段

1 个答案: