How to arrange slicers/checklist horizontally-CodePudding

I have list of checkboxes that are stacked vertically and I would like to arrange them horizontally instead using CSS

This is what I currently have

I have tried adjusting the css myself but can't quite get what I need. I'm sure it's something simple but can't for the life of me figure it out

CodePudding user response：

See comments in the snippet below.

@import url("https://fonts.googleapis.com/css?family=Roboto");
body {
  font: normal normal normal 1rem/1 'Roboto';
  color: black;
}

.wrapper .content {
  padding: 1.5rem 1.5rem 1rem;
}

.wrapper .header {
  display: block;
  font-size: 1.25rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.84);
  margin: 0;
  padding: 0;
  transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}

.wrapper ul {
  display: block;
  padding: 0;
  width: 100%;
}

.wrapper ul li {
  display: block;
  padding: 1rem 0 0;
}

.wrapper ul li p {
  display: inline-block;
  line-height: 1.5rem;
  margin: 0 1.25rem 0 0;
  vertical-align: middle;
  transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch {
  display: inline-block;
  position: relative;
  width: 2.5rem;
  height: 1rem;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.26);
  transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
  cursor: pointer;
}

.switch::before {
  content: '';
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  background: #fafafa;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch:active::before {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0 1.25rem rgba(128, 128, 128, 0.1);
}

input:checked .switch {
  background: rgba(139, 195, 74, 0.5);
}

input:checked .switch::before {
  left: 1.25rem;
  background: #8bc34a;
}

input:checked .switch:active::before {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0 1.25rem rgba(139, 195, 74, 0.2);
}

/* New CSS */
/* Added */
.wrapper ul {
  display: flex;
  justify-content: center;
}

.wrapper ul li {
  display: inline-flex; /* Changed */
  margin-right: 24px; /* Added */
}

.name-container,
.switch-container {
  flex: 0 0 50%;
  width: 50%;
}

.name-container {
  text-align: right;
}

.switch-container {
  text-align: right; /* Changed */
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Toggles </title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div >
    <div >
      <p >Options</p>
      <ul>
        <li>
          <div >
            <p>Status</p>
          </div>
          <div >
            <input id="test" type="checkbox" hidden="hidden" />
            <label  for="test"></label>
          </div>
        </li>
        <li>
          <div >
            <p>User</p>
          </div>
          <div >
            <input id="test1" type="checkbox" hidden="hidden" />
            <label  for="test1"></label>
          </div>
        </li>
        <li>
          <div >
            <p>Department</p>
          </div>
          <div >
            <input id="test2" type="checkbox" hidden="hidden" />
            <label  for="test2"></label>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>