How to Make Field Labels Inline

Anne Rosebery

By default, in the default bundle, the question labels are above the question:

Radio2

To make a radio button or checkbox label in-line with the choices, you can use this class:

.inline-label label.field-label {
    float: left;
    width: auto;
    margin: 0 1.5rem 0 0;
  }

and give the radio button or checkbox this class as a render attribute:

Radio4

That will result in this:

Radio3

Note that if you want this effect for all questions on the form, it is possible to use this css:

  form label.field-label {
    float: left;
    width: auto;
    margin: 0 1.5rem 0 0;
  }

But actually seeing it for all fields, including text fields, will also require adjusting the css for the answer. Currently this includes width: 100%, which pushes the label onto another line. This would need to be adjusted to give room for the label, such as:

 form input[type=password], form input[type=text] {
    width: 80%;
}