CODEWITHSUNDEEP
htmlcss
TheLostOne
TheLostOne

Reputation: 281

How to horizontally align fieldset elements?

I have the following code.

Unfortunately I can't edit the code because it's automatically created by the system I'm working with. I can only define custom CSS and add HTML code before and after this code snippet.

How can I align the checkboxes horizontally and position the labels above?

<div>
  <div title="">
    <fieldset>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_0" name="field_332[]" type="checkbox" value="1">
      <label for="field_332_0">
        1
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_1" name="field_332[]" type="checkbox" value="2">
      <label for="field_332_1">
        2
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_2" name="field_332[]" type="checkbox" value="3">
      <label for="field_332_2">
        3
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_3" name="field_332[]" type="checkbox" value="4">
      <label for="field_332_3">
        4
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_4" name="field_332[]" type="checkbox" value="5">
      <label for="field_332_4">
        5
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_5" name="field_332[]" type="checkbox" value="6">
      <label for="field_332_5">
        6
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_6" name="field_332[]" type="checkbox" value="7">
      <label for="field_332_6">
        7
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_7" name="field_332[]" type="checkbox" value="8">
      <label for="field_332_7">
        8
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_8" name="field_332[]" type="checkbox" value="9">
      <label for="field_332_8">
        9
      </label>
      <br>
    </fieldset>
  </div>
</div>

Upvotes: 2

Views: 3165

Answers (4)

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14891

The issue is with the br entering a new line-break.

My solution is to display:none the br's to render all the checkboxes inline. This works in Chrome - I'm not too sure of other browsers.

br {
  display:none;
}


br {
  display:none;
}
fieldset {
  padding-top:1.5em;
}
input[type=checkbox]:after {
    content: attr(value);
    position: absolute;
    top: -1.5em;
    left: 0;
}

input[type=checkbox] {
    position: relative;
}
label {
  display:none;
}
<div>
  <div title="">
    <fieldset>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_0" name="field_332[]" type="checkbox" value="1">
      <label for="field_332_0">
        1
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_1" name="field_332[]" type="checkbox" value="2">
      <label for="field_332_1">
        2
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_2" name="field_332[]" type="checkbox" value="3">
      <label for="field_332_2">
        3
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_3" name="field_332[]" type="checkbox" value="4">
      <label for="field_332_3">
        4
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_4" name="field_332[]" type="checkbox" value="5">
      <label for="field_332_4">
        5
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_5" name="field_332[]" type="checkbox" value="6">
      <label for="field_332_5">
        6
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_6" name="field_332[]" type="checkbox" value="7">
      <label for="field_332_6">
        7
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_7" name="field_332[]" type="checkbox" value="8">
      <label for="field_332_7">
        8
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_8" name="field_332[]" type="checkbox" value="9">
      <label for="field_332_8">
        9
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_8" name="field_332[]" type="checkbox" value="10">
      <label for="field_332_8">
       10
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_8" name="field_332[]" type="checkbox" value="11">
      <label for="field_332_8">
      11
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_8" name="field_332[]" type="checkbox" value="12">
      <label for="field_332_8">
      12
      </label>
      <br>
    </fieldset>
  </div>
</div>

Edit

In response to your update, I have updated my answer.

Originally I was going to position:relative the labels above the inputs. However, the CSS I used only accounts for single digit labels. Anything longer looked odd.

What I am doing here is adding a pseudo-element to the checkboxes with the value as the content, then positioning those directly above the checkboxes. The double digits still look a little odd compared with the single digits, but they look better than the position:relative solution I had thought of earlier.

br {
  display:none;
}
fieldset {
  padding-top:1.5em;
}
input[type=checkbox]:after {
    content: attr(value);
    position: absolute;
    top: -1.5em;
    left: 0;
}

input[type=checkbox] {
    position: relative;
}
label {
  display:none;
}

Upvotes: 5

Carlos M. Meyer
Carlos M. Meyer

Reputation: 446

fieldset br{
display:none;
}
label {
    display: block;
    width: 100%;
    float: left;
    padding-left: 5px;
}
input {
display: block;

}

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

You can position the labels above the inputs by giving them each relative positioning, and by adjusting their top and left offsets:

label {
  position: relative;
  top: -1.2em;
  left: -1.6em;
}

input {
  margin-top: 2em;
  position: relative;
  width: 2em;
}

br {
  display: none;
}


label {
  position: relative;
  left: -1.6em;
  top: -0.3em;
}

input {
  position: relative;
  top: 0.9em;
  width: 2em;
}

br {
  display: none;
}
<div>
  <div title="">
    <fieldset>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_0" name="field_332[]" type="checkbox" value="1">
      <label for="field_332_0">
        1
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_1" name="field_332[]" type="checkbox" value="2">
      <label for="field_332_1">
        2
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_2" name="field_332[]" type="checkbox" value="3">
      <label for="field_332_2">
        3
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_3" name="field_332[]" type="checkbox" value="4">
      <label for="field_332_3">
        4
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_4" name="field_332[]" type="checkbox" value="5">
      <label for="field_332_4">
        5
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_5" name="field_332[]" type="checkbox" value="6">
      <label for="field_332_5">
        6
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_6" name="field_332[]" type="checkbox" value="7">
      <label for="field_332_6">
        7
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_7" name="field_332[]" type="checkbox" value="8">
      <label for="field_332_7">
        8
      </label>
      <br>
      <input name="field_332[]" type="hidden" value="">
      <input id="field_332_8" name="field_332[]" type="checkbox" value="9">
      <label for="field_332_8">
        9
      </label>
      <br>
    </fieldset>
  </div>
</div>

Upvotes: 0

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15847

remove all the <br> in the fieldset

so if you cannot edit markup then use

fieldset br{
display:none;
}

WORKING DEMO

Upvotes: 2

Related Questions