Question

I am looking for a neat way to space my form elements but i am not so sure how to do it.

Currently,i am using the ordinary <br/> to space but i wonder if there was a better way of doing this using class or id

<form>
  Message: <input type="text" class="msg" name="message" /><br/><br/>
   <input type="submit" class="c-add" value="Add" />
   <input type="submit" class="c-update" value="Update" />
  </form>

I am thinking of

 .c-add + .c-update{
  margin-right:100px;
  }

but that’s not valid css.What would be the solution?

Answer 1

.c-add + .c-update is a valid CSS selector. It selects all elements with the “c-update” class that follow immediately an element with the “c-add” class. Example: DEMO (CSS Selector Reference)

Solution

You can seperate multiple selectors with a comma. You do not need to give each input a unique class name. That’s only necessary if you want to style them uniquely. Since you did not provide information on how the expected result should look like, i made a demo with different solutions:

DEMO

HTML markup:

<form class="form">
   <label>Message:</label><input type="text" class="msg" name="message" />
   <input type="submit" class="add" value="Add" />
   <input type="submit" class="update" value="Update" />
</form>

Note that i wrapped “Message” with label, which is better markup.

CSS to make a one-row inline form:

.form input {
    margin-right: 0.5em;
}

.form label {
    float: left;
    margin-right: 0.5em;
}    

CSS to make a multiple-row form:

.form input {
    display: block;
    margin-bottom: 1em;
}

.form label {
    float: left;
    margin-right: 0.5em;
} 

​You can mix both approaches by using specific classes for each input element or type.