PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 17, 2022

[FIXED] How to display multiple checkboxes both horizontally and vertically css

 November 17, 2022     checkbox, css, html, vertical-alignment     No comments   

Issue

I'm trying to set a collection of checkboxes both horizontally and vertically, but they don't come out uniformally. The labels for each checkbox can vary in size, e.g. one label for a checkbox says "International Casaulty Treaty" whereas another only says WIP.

I was going over this vertical example here. http://jsfiddle.net/zcuLgbxt/

How to can I neatly arrange them so they are all in alignment both vertically and horizontally? Thanks very much in advance!

Here is my simple HTML/CSS

li {
    margin: 5px;
}

input {
    width: 20px;
    background-color: blue;
    position: relative;
    left: 200px;
    vertical-align: middle;
}

.vertical-list {
    width: 200px;
    position: relative;
    left: -20px;
    display: inline-block;
    vertical-align: middle;
}

li{
    list-style:none;
}

.horizontal-list{
    display: inline;
}
<center>    
  <ul>        
      <li>
          <input type="checkbox" >
          <label  class="vertical-list"> label1  label1  label1</label>
          <input type="checkbox"  >
          <label class="horizontal-list" for="myid2">label2</label>
      </li>
      <li>
          <input type="checkbox" >
          <label class="vertical-list" >label2label2label2</label>
          <input type="checkbox">
          <label class="horizontal-list" for="myid2">label2label2</label>

      </li>

      <li>
          <input type="checkbox"  >
          <label class="vertical-list" > label4  label4  label4</label>
          <input type="checkbox"  >
          <label class="horizontal-list" >label2</label>
      </li>
  </ul>
</center>


Solution

CSS-Tables

li {
  margin: 5px;
  display: table-row;
}

li * {
  display: table-cell;
  padding: 0.5em;
}

input {
  background-color: blue;
  position: relative;
}

.vertical-list {}

li {
  list-style: none;
}

.horizontal-list {
  display: inline;
}
<ul>
  <li>
    <input type="checkbox">
    <label class="vertical-list"> label1  label1  label1</label>
    <input type="checkbox">
    <label class="horizontal-list" for="myid2">label2</label>
  </li>
  <li>
    <input type="checkbox">
    <label class="vertical-list">label2label2label2</label>
    <input type="checkbox">
    <label class="horizontal-list" for="myid2">label2label2</label>

  </li>

  <li>
    <input type="checkbox">
    <label class="vertical-list"> label4  label4  label4</label>
    <input type="checkbox">
    <label class="horizontal-list">label2</label>
  </li>
</ul>



Answered By - Paulie_D
Answer Checked By - Willingham (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing