fighting with radio buttons alignment the ask is to align them with the rest of the form text boxes
I've trialed suggested solutions from this site and multiple others and youTube this was the most decent
https://www.youtube.com/watch?v=N8ZMzN40q0g&t=13s
html {background-color: off #f3f3f3;}
fieldset {background-color: rgb(181, 221, 230); width: 700px;}
#submit {width: 100px; margin-left: 300px; margin-bottom: 20px;}
#comments {margin-top: 0.8rem; height: 100px;}
label {display: inline-block; text-align: right; width: 150px; margin: 0.8rem;}
input[type="radio"] {margin-left: 190px;}
.required-field::after {content: "*"; color: red;}
.select {text-align: justify; margin-left: 0px;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Car Race Signup Sheet</title>
</head>
<body>
<h1>Car Race Signup Sheet</h1>
<p>Note: MANDATORY FIELD = *</p>
<form>
<fieldset>
<div >
<label for="selectevent">* Select Event</label>
<!-- <div > -->
<input type="radio" id="Stock" name="* Select Event"
value="Stock">
<label for="Stock">Stock</label><br>
<input type="radio" id="Modified" name="* Select Event"
value="Modified">
<label for="Modified">Modified</label><br>
<!-- </div> -->
<label for="lastname">*Last Name</label>
<input type="text" name="lastname"><br>
<label for="firstname">*First Name</label>
<input type="text" name="firstname"><br>
<label for="address">*Address</label>
<input type="text" name="address"><br>
<label for="city">*City</label>
<input type="text" name="city"><br>
<label for="Province">*Province</label>
<select name="Province">
<option value="---">---</option>
<option value="AB">AB</option>
<option value="BC">BC</option>
</select><br>
<label for="postalcode">*Postal Code/Zip Code</label>
<input type="text" name="postalcode"><br>
<label for="country">*Country</label>
<input type="text" name="country"><br>
<label for="email">*Email</label>
<input type="email" name="email"><br>
<label for="dateofbirth">*Date of Birth</label>
<input type="date" name="dateofbirth"><br>
<label for="gender">* Gender</label>
<input type="radio" id="Male" name="* Gender"
value="Male">
<label for="Male">Male</label><br>
<input type="radio" id="Female" name="* Gender"
value="Female">
<label for="Female">Female</label><br>
<input type="radio" id="Other" name="* Gender"
value="Other">
<label for="Other">Other</label><br>
<label for="carmake">*Car Make</label>
<input type="text" name="carmake"><br>
<!-- </div> -->
<label for="comments">Comments</label>
<input type="comments" name="comments" id="comments"><br>
<!-- <div > -->
<label for="agree">*I agree to the waiver</label>
<input type="checkbox" name="checkbox">
<label for="yes">Yes</label><br>
<!-- </div> -->
<input type="submit" name="Submit" id="submit">
</fieldset>
</form>
</body>
</html>CodePudding user response：
I would recommend you to restructure it.
Here is a beginning point:
html {
background-color: off #f3f3f3;
}
fieldset {
background-color: rgb(181, 221, 230);
width: 700px;
}
#submit {
width: 100px;
margin-left: 300px;
margin-bottom: 20px;
}
#comments {
margin-top: 0.8rem;
height: 100px;
}
label {
display: inline-block;
width: auto;
margin: 0.8rem;
}
input[type="radio"] {
margin-left: 100px;
}
.required-field {
display: flex;
flex-direction: column;
}
.required-field::after {
content: "*";
color: red;
}
.select {
text-align: justify;
margin-left: 0px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<title>Car Race Signup Sheet</title>
</head>
<body>
<h1>Car Race Signup Sheet</h1>
<p>Note: MANDATORY FIELD = *</p>
<form>
<fieldset>
<div >
<label for="selectevent">* Select Event</label>
<!-- <div > -->
<div>
<input type="radio" id="Stock" name="* Select Event" value="Stock">
<label for="Stock">Stock</label>
</div>
<div>
<input type="radio" id="Modified" name="* Select Event" value="Modified">
<label for="Modified">Modified</label>
</div>
<!-- </div> -->
<div>
<label for="lastname">*Last Name</label>
<input type="text" name="lastname"><br>
</div>
<div>
<label for="firstname">*First Name</label>
<input type="text" name="firstname"><br>
</div>
... and more
</fieldset>
</form>
</body>
</html>The way you structured it is kind of old-fashioned. I think most people would use flexbox for such a layout. You can learn about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
CodePudding user response：
<form>
<fieldset>
<div >
<label for="selectevent">* Select Event</label>
<input type="radio" id="Stock" name="* Select Event"
value="Stock">
<label for="Stock">Stock</label><br>
<label></label>
<input type="radio" id="Modified" name="* Select Event" value="Modified">
<label for="Modified">Modified</label><br>
<label for="lastname">*Last Name</label>
<input type="text" name="lastname"><br>
<label for="firstname">*First Name</label>
<input type="text" name="firstname"><br>
<label for="address">*Address</label>
<input type="text" name="address"><br>
<label for="city">*City</label>
<input type="text" name="city"><br>
<label for="Province">*Province</label>
<select name="Province">
<option value="---">---</option>
<option value="AB">AB</option>
<option value="BC">BC</option>
</select><br>
<label for="postalcode">*Postal Code/Zip Code</label>
<input type="text" name="postalcode"><br>
<label for="country">*Country</label>
<input type="text" name="country"><br>
<label for="email">*Email</label>
<input type="email" name="email"><br>
<label for="dateofbirth">*Date of Birth</label>
<input type="date" name="dateofbirth"><br>
<label for="gender">* Gender</label>
<input type="radio" id="Male" name="* Gender"
value="Male">
<label for="Male">Male</label><br>
<label></label>
<input type="radio" id="Female" name="* Gender"
value="Female">
<label for="Female">Female</label><br>
<label></label>
<input type="radio" id="Other" name="* Gender"
value="Other">
<label for="Other">Other</label><br>
<label for="carmake">*Car Make</label>
<input type="text" name="carmake"><br>
<label for="comments">Comments</label>
<input type="comments" name="comments" id="comments"><br>
<label for="agree">*I agree to the waiver</label>
<input type="checkbox" name="checkbox">
<label for="yes">Yes</label><br>
<input type="submit" name="Submit" id="submit">
</fieldset>
</form>
and remove
<pre>input[type="radio"] {margin-left: 190px;}</pre>