我正在尝试在表单的右上角获取徽标,但是我不知道如何在CSS中进行设置。
我的HTML:
{% block body %}
<form action="{{ url_for('my_form') }}" method="POST">
<div class="container">
<h1>Gasten registratie</h1>
<p>Vul dit formulier in om te registreren</p>
<hr>
<label for="First-Name"><b>Voornaam</b></label>
<input type="text" id="First-Name" placeholder="Vul hier uw voornaam in" name="Voornaam" required>
<label for="Last-Name"><b>Achternaam</b></label>
<input type="text" id="Last-Name" placeholder="Vul hier uw achternaam in" name="Achternaam" required>
<label for="Company-name"><b>Bedrijfsnaam</b></label>
<input type="text" id="Company-name" placeholder="Vul hier uw bedrijfsnaam in" name="Bedrijfsnaam" required>
<label for="Date"><b>Datum</b></label>
<input type="date" id="Date" placeholder="Selecteer de Datum" name="Datum" required />
<hr>
<p>In het kader van onze ISAE certificering registreren wij uw gegevens.</p>
<p>Wij verwerken uw gegevens volgends de regels van het AVG.</p>
<button type="submit" class="registerbtn">Registreren</button>
</div>
</form>
{% endblock %}
我的CSS:
h1{text-align: left;}
* {box-sizing: border-box}
/* Add padding to containers */
.container {
background-image: url("inconto.png");
background-repeat: no-repeat;
background-position: top, right;
background-size: 45px;
padding: 16px;
font-family: Calibri, sans-serif;
max-width: 750px;
max-height: fit-content;
width: 100%;
margin: 0 auto;
position: relative;
}
.Fist-Name {font-family: Calibri, sans-serif;}
.Last-Name {font-family: Calibri, sans-serif;}
.Company-name {font-family: Calibri, sans-serif;}
/* Full-width input fields */
input[type=text], input[type=date] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=date]:focus {
background-color: #ddd;
outline: none;
}
/* Overwrite default styles of hr */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for the submit/register button */
.registerbtn {
background-color: #6a0dad;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
font-family: Calibri, sans-serif;
}
.registerbtn:hover {
opacity:1;
}
我正在尝试在表格右上角的容器中获取图片,该图片与表格中第一个标题“ Gasten Registratie”的高度相同。为了提供说明性支持,我将附上表格的图片。如果有人可以帮助我,那就太好了。
谢谢!
如下更新container
CSS类