Vertical Radio and Checkboxe

HTML-CSS
1

I’m having trouble aligning my radio and checkbox types vertically. Please help.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vendor Survey Form</title>
    <link rel="stylesheet" href="styles.css"/>
    </head>
    <body>
      <div class="survey">
      <h1 id="title">Vendor Survey Form</h1>
      <p id="description">Help us improve our future events!</p>
      <form id="survey-form">
     <fieldset>  
        <label id="name-label">Vendor Name: <input placeholder="Name" id="name" type="text" required/></label>
        <label id="email-label">Email: <input placeholder="vendor@email.com" type="email" id="email" required/></label>
        </fieldset>
        <fieldset>
        <label>Which of the following best describes your business:</label>
          <div class="business">
          <input id="food" value="food" name="vendor-type" type="radio"/>
          <label for="food">Food</label>
          </div>
          <div class="business"><input id="clothing" value="clothing" name="vendor-type" type="radio"/>
          <label for="clothing">Clothing</label>
          </div>
          <div class="business"><input id="art" value="art" name="vendor-type" type="radio"/>
          <label for="art">Art</label>
          </div>
          <label id="number-label">Please rate your vendor experience on a scale of 1-10: <input placeholder="input number" id="number" type="number" min="1" max="10" required/></label>        
        <label>Would you recommend this event to friends/family? <select id="dropdown">
          <option value="">select one</option>
          <option value="yes">Yes</option>
          <option value="no">No</option>
          </select>
          </label>
          <label>How could we improve future events? Select all that apply:
            </label>
           <div class="business"><input id="sug1" value="security" type="checkbox"/><label for="sug1">More Security</label></div>
           <div class="business"><input id="sug2" value="variety" type="checkbox"/><label for="sug2">Vendor Variety</label></div>
            <div class="business"><input id="sug3" value="venue" type="checkbox"/><label for="sug3">Bigger Venue</label></div>
            <div class="business"><input id="other" value="other" type="checkbox"/><label for="other">Other</label></div>
          <label>If you selected "Other" please write suggestions here: <textarea></textarea>
            </label>
            </fieldset>
            <input id="submit" type="submit" value="Submit Survey" />
        </form>
      </body>
  </html>

/* file: styles.css */
body {
  background-color: 7D0541;
  font-family: Arial;
  width: 100%;
  height: 100vh;
  margin: 0;
}
.survey {
  background-color: #FFFDE7;
  width: 80%;
  margin: 0 auto;
  padding: 10px;
}
form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}
h1, p {
  text-align: center;
}
input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 1em;
  vertical-align: middle;
}
label {
  display: block;
  margin: .4rem;
  padding: 0px 1em 0px 8px;
  float: left;
  clear: none;
}
.business {
  display: flex;
  flex-direction: column;
  float: left;
}
fieldset {
  overflow: hidden;
}
input[type=radio] {
float: left;
clear: none;
margin: 2px 0 0 2px;
}
input[type=checkbox] {
  vertical-align: middle;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Hey, I believe you could do it by using:

.business {
  display: block;
  width: 100%;
}

Furthermore to get the labels and inputs to be on the same line probably adding something like this might help:

input[type=checkbox] {
  display: inline-block;
  width: 30%;
}
3 
.business {
  display: block;
  }

input[type="radio"] {
margin-bottom: -35px;
}

input[type="checkbox"] {
 margin-bottom: -35px;
 }

Try to play with this approach.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.