Tell us what’s happening:
Help! how can I align a checkbox with it’s label. Right now, the checkbox is on top of its label. I want to show them side by side.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>All about Japanese Food</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 id="title">All about Japanese Food</h1>
<p id="description">Do you like Japanese food? Please let me know!</p>
<form id="survey-form">
<fieldset>
<label id="name-label">Name: <input id="name" type="text" required placeholder="Firstname Lastname" /></label>
<label id="email-label">Email: <input id="email" type="email" required placeholder="e.g. TARO@mail.com" /></label>
<label id="phone-label">Phone number: <input id="phone" type="tel" required placeholder="e.g. 080-1234-5678"></label>
<label id="number-label">Age: <input id="number" type="number" min="18" max="100" required placeholder="18+"/></label>
<label id=dropdown-label">What region do you currently live in?</label>
<select id="dropdown">
<option value="1">(select one)</option>
<option value="2">North America</option>
<option value="3">South America</option>
<option value="4">Europe</option>
<option value="5">Eastern Europe</option>
<option value="6">Africa</option>
<option value="7">Middle East</option>
<option value="8">South Asia</option>
<option value="9">Central Asia</option>
<option value="10">East Asia</option>
<option value="11">Asia-Pacific</option>
</select>
</label>
</fieldset>
<fieldset>
<p>Do you like spicy food?</p>
<label for="yes-spicy"><input value="1" id="yes-spicy" type="radio" name="spicy-food" class="inline">Yes, I like spicy food.</label>
<label for="no-spicy"><input value="2" id="no-spicy" type="radio" name="spicy-food" class="inline">No, I don't like spicy food.</label>
</fieldset>
<fieldset>
<p>Have you ever tried these Japanese food?<span class="hint">(check all that apply)<span></p>
<input value="1" name="ramen" type="checkbox" class="inline"><label for="ramen">Ramen</label>
<input value="2" name="udon" type="checkbox" class="inline"><label for="udon">Udon</label>
<input value="3" name="yakisoba" type="checkbox" class="inline"><label for="yakisoba">Yakisoba</label>
<input value="4" name="takoyaki" type="checkbox" class="inline"><label for="takoyaki">Takoyaki</label>
<input value ="5" name="tendon" type="checkbox" class="inline"><label for="tendon">Tendon</label>
<input value="6" name="unagi" type="checkbox" class="inline"><label for="unagi">Unagi</label>
<input value="7" name="curryrice" type="checkbox" class="inline"><label for="curryrice">Curry and Rice</label>
<input value="8" name="sushi" type="checkbox" class="inline"> <label for="sushi">Sushi</label>
</fieldset>
<fieldset>
<label for="comment">What would you like to try next? leave a comment below!
<textarea id="comment" name="comment" rows="3" cols="30" placeholder="I would like to try Natto..."></textarea>
</fieldset>
</form>
</body>
/* file: styles.css */
body {
font-size: 1.25rem;
font-weight: 300;
background-color: #FB8E7E;
font-family: sans-serif;
color: #1b1b32
}
fieldset {
background-color: #F8CA9D;
border-color: #F8CA9d;
width: 500px;
}
h1, #description {
text-align: center;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 5px 0 0 0;
width: 100%;
min-height: 2em;
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: auto;
padding: 3rem;
}
.hint {
font-size: 0.9rem;
}
input,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.188
Challenge: Survey Form - Build a Survey Form
Link to the challenge: