Why won't my gender element behave

Why won't my gender element behave
0.0 0

#1

Why won’t my gender element behave the same way as my other label elements?


#2

Hi

You have<div>s inside your <label> tag for that input. <div> is block level so it will start a new line.

You can change your html (remove or replace those divs) to avoid that or apply styling to override the block level behavior.

<span> is div’s less popular cousin - much like <div> but it is inline, not block, by default.

Also needs some attention is <option is some stray code within that label.

I did notice an individual class name textFieldX for each label. Since these have the same styles to apply you could just have one class textField and share that styling across all of them. That way if you change anything there is only one place to make that change.


#3

@alhazen1 has pointed out what is causing the problems you are seeing. Also, as @alhazen1 mentioned, you could simplify your CSS and make it much more DRY (Do Not Repeat Yourself).

Making the following changes to your HTML and CSS will get you a little closer to something you might want.

FYI - To make it easier on yourself and others trying to read your code, you should make a habit of indenting your code (as I have done below). Codepen has a feature called Tidy which is available via a dropdown menu on the right of each of the HTML, CSS, and JS modules.

HTML

<h1 id="title"> Free Code Camp Feedback and Usage form.</h1>
<div id="form-outer">
  
  <div class='textField'>
    <p>Help us understand what types of peole use Free Code Camp the most and why.</p>
    <label for='name'>Name:
      <input id='name' placeholder="Enter Your Name"/>
    </label>
  </div>

  <div class="textField">
    <label for 'email'>Email:
      <input id='email' placeholder="Enter Your Email"/>
    </label>
  </div>

  <div class="textField">
    <label for='age'>Age:
      <input id='age' placeholder="Enter your age"/>
     </label>
  </div>

  <div class="textField">
    <label for='Gender'>Gender:
			<select id="Gender">
		  	<option disabled selected>Select an Option</option>
				<option value="student">Male</option>
				<option value="learner">Female</option>
			  <option value="professional">Transgender</option>
		  </select>
    </label>
  </div>

  <div class="textField">
    <label for='Income'>Income:
        <input id="Income" placeholder="Income in US dollars">
      </label>
  </div>
</div>

CSS

#title{
  font-family: Courier New;
  text-align: center;
}

body {
  background-color: green;
} 

#form-outer {
  background-color: white;
  margin: auto;
  border-radius: 4px;
  max-width: 1100px;
  padding: 15px 10px 10px 10px;
}

.textField {
  margin-top: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.textField:first-child { 
   margin-top: 1%;
}

input, select {
  width: 250px;
  height: 20px;
  box-sizing: content-box;
}