try to make the forms slightly less hideous
This commit is contained in:
parent
c4411006fe
commit
b915484190
@ -15,11 +15,11 @@
|
|||||||
<form id="mentalAttackForm">
|
<form id="mentalAttackForm">
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<div class="form-field">
|
<div class="form-field">
|
||||||
<label for="ams">Attacker Mental Strength:</label>
|
<label for="ams">Attacker MS:</label>
|
||||||
<input type="number" name="ams" id="ams" min="3" max="18" value="10">
|
<input type="number" name="ams" id="ams" min="3" max="18" value="10">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-field">
|
<div class="form-field">
|
||||||
<label for="dms">Defender Mental Strength:</label>
|
<label for="dms">Defender MS:</label>
|
||||||
<input type="number" name="dms" id="dms" min="3" max="18" value="10">
|
<input type="number" name="dms" id="dms" min="3" max="18" value="10">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,3 +1,14 @@
|
|||||||
|
label {
|
||||||
|
display: inline-block; /* makes the labels block elements but keep them inline */
|
||||||
|
width: 100px; /* you may need to adjust this based on the width of your widest label */
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 5px; /* provides a 5px space between the label and its input field */
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
.form-row {
|
.form-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -6,15 +17,13 @@
|
|||||||
|
|
||||||
.form-field {
|
.form-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row; /* changed this from column */
|
align-items: center;
|
||||||
align-items: center; /* added this to vertically align elements in the row */
|
justify-content: left;
|
||||||
justify-content: space-between; /* added this to put some space between the label and the input field */
|
width: 200px;
|
||||||
width: 275px; /* optionally set a width to keep it consistent */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-container {
|
.content-container {
|
||||||
max-width: 500px; /* adjust the max width as per requirement */
|
max-width: 500px;
|
||||||
/* this line centers your container */
|
|
||||||
margin: 20px 0px 0 20px;
|
margin: 20px 0px 0 20px;
|
||||||
padding: 0 20px; /* bit of padding so content doesn't touch the edges */
|
padding: 0 20px;
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user