Build a Survey Form, css issue!

I am unable to center my radio buttons / check boxes horizontally with my labels can someone please help ?

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Survey Form</title>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <header>
            <h1 id="title">Auction Website Survey Form</h1>
            <p id="description">This is a survey to determine if there is a demand for an auction website in Trinidad & Tobago.</p>
        </header>
        <main>
            <form id="survey-form">
                <fieldset>
                    <label for="name" id="name-label">Name: <input type="text" id="name" placeholder="Please Enter your full name :" required></label>
                    <label for="email" id="email-label">Email: <input type="email" id="email" placeholder="Please Enter your email Address:" required></label>
                    <label for="number" id="number-label">Age: <input type="number" id="number" min="13" max="80" placeholder="Please Enter a number >= 13 <= 80"></label>
                    <label for="dropdown">Which option best describes you:
                        <select id="dropdown">
                            <option>Make a selection</option>
                            <option>Employed</option>
                            <option>Student</option>
                        </select>
                    </label>
                    <p>Do you think an Auction website is a good idea and would Trinbagonians use it ?
                    </p>
                    <label for="radio"><input type="radio" value="1" name="radio" class="inline">Yes</label>
                    <label for="radio"><input type="radio" value="0" name="radio" class="inline">No</label>
                    <p>Which items would you sell or purchase via an auction ?</p>
                    <label><input type="checkbox" value="1" class="inline">Realestate</label>
                    <label><input type="checkbox" value="2" class="inline">Automotive</label>
                    <label><input type="checkbox" value="3" class="inline">Electronics</label>
                    <label><input type="checkbox" value="4" class="inline">Food & Beverage</label>
                    <label>Any ideas or thoughts ?<textarea placeholder="Enter comments here ! "></textarea></label>
                    <input type="submit" id="submit">
                    

                </fieldset>
            </form>
        </main>

    </body>

</html>

---------------------------------------------------------------------------------------------

body {
  background-color: 287026;
  color: #f5f6f7;
  width: 100%;
  height: 100vh;
  font-family: Sans-serif;
  font-size: 18px;
}

header {
  text-align: center;
}

p {
  margin-left: 18px;
}

form {
  width: 60vw; 
  margin: auto;
}

fieldset {
  margin-left: 0;
  
}

label {
  display: block;
  width: 100%;
  margin: 1em;
}

input, select, textarea {
  width: 100%;
  min-height: 2em ;
  margin-top: 1em;
}

.inline {
  width: unset;
  
}

input[type="submit"] {
  margin-left: 15px;
}

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Go back to the form challenge and see how it was done (look at the .inline class)


Personally, I would use Flexbox with align-items: center on the label but Flexbox hasn’t been taught yet

input[type="radio"],
input[type="checkbox"] {
  margin: 0;
}

label:has(input[type="radio"], input[type="checkbox"]) {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}

Do not use the :has() selector it is just an example and it will not work in Firefox. Target the correct label elements using a class.

Thank you very much this method aligns it vertically and it looks allot better ,
i know this project was mainly about functionality , but i noticed that i am still struggling with getting a handle on positioning different elements , may be i am getting ahead of myself lol. Thanks again for your time and support .

You are still early in the curriculum. You will learn more CSS layout techniques such as Flexbox and Grid later on.

You will also want to supplement the learning with other resources. MDN is a site you should keep handy.

web.dev is also a good resource.

YouTube has lots of resources, you can’t go wrong with some Kevin Powell videos.

1 Like

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