Tell us what’s happening:
i cannot seem to get the checkbox to appear inline with the text after it. it is either appearing after of on top
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Skincare Survey Form</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<h1 id="title">Skincare Routines</h1>
<p id="description"/>Tell us about your skincare routine</p>
<form id="survey-form"></form>
<fieldset>
<label for="name-label">Name <input id="name-label" type="text" name="Name" placeholder="Jane" required></label>
<label for="email-label">Email <input id="email-label" type="email" name="Email" required placeholder="janedoe@gmail.com"></label>
<label for="number-label">Age (optional) <input id="number-label" min="18" max="120" type="number" placeholder="18"></label>
</fieldset>
<fieldset>
<label for="skin-type">Which would you say is your skin type?</label>
<select id="dropdown" name="skin-type">
<option value="0">select one</option>
<option value="1">Oily Skin</option>
<option value="2">Dry Skin</option>
<option value="3">Combination Skin</option>
</select>
</label>
</fieldset>
<fieldset>
<label>Which brand would you recommend to your friends?</label>
<label for="garnier"><input type="radio" id="garnier" name="brand" class="inline" checked>Garnier</label>
<label for="cerave"><input type="radio" id="cerave" name="brand" class="inline">CeraVe</label>
<label for="olay"><input type="radio" id="olay" name="brand" class="inline">Olay</label>
</fieldset>
<fieldset>
<label for="steps">Which products are included in your current skincare routine? (check all that apply)</label>
<input type="checkbox" class="inline" id="cleanser">Cleanser</input>
<input type="checkbox" class="inline" id="toner" checked>Toner</input>
<input type="checkbox" class="inline" id="spot-treatment">Spot treatment</input>
<input type="checkbox" class="inline" id="serum">Serum</input>
<input type="checkbox" class="inline" id="moisturizer">Moisturizer</input>
</fieldset>
<label for="comments">Additional comments:
<textarea id="comments" rows="3" cols="10" placeholder="Applying sunscreen is also advantageous..."></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>
/* file: styles.css */
body{
background-color: #f0f8ff;
width:100%;
}
h1, p{
text-align: center;
}
fieldset{
border: none;
padding: 2rem 0;
}
input{
width: 100%;
margin: 10px 0 0 0;
background-color: #e6e6fa;
border: 1px solid #e6e6fa;
}
.inline{
display: inline;
}
textarea{
width: 100%;
border: 1px solid;
border-color: #73c2fb
}
input[type="submit"]{
display: block;
width: 60%;
margin: 1em auto;
font-size: 1.1rem;
background-color: #ffc1cc;
min-width: 300px;
height: 2em;
}
input[type="checkbox"]{
display: inline-block;
width: 20px ;
height: auto;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Challenge Information:
Survey Form - Build a Survey Form