Form a story Project

I just completed the Form a story project. I was playing around trying to get the labels and input fields to display aligned perfectly all down the page and am having some difficulties. Most things on StackOverflow are using divs and other elements to align input and labels beside eachother.

Is there a quick way in CSS to align these elements?

Form A Story Project

1 Like

Line 26 in ‘style.css’ has, text align: center; which is not really a good choice, imho. It would be easier to read and use if it was left aligned.

I added padding-left: 1em; padding: 1em; to that selector rule to pull it away from the left edge edges of the viewport.

We may wish to center align the heading.

Change line 10 selector to h1 and add the align rule.

I also tweaked the submit button.

        </select>
        <div id="submit">
          <input type="submit" value="Form My Story!">
        </div>

Note that the <br> was removed.

#submit {
   text-align: center;
   margin: 1em 0 0 -1em;
}


Edit: changed padding rule.
form_a_story_padding

2 Likes

Explanation

#submit {
   text-align: center;
   margin: 1em 0 0 -1em;
}

The -1em removes (accounts for) the parent’s padding on the left side.

It’s stuff like this that makes one revile padding. In the past I would use a container with a margin so widths would shrink, rather than grow. Padding is a science, or nuisance, depending upon point of view.