Home > database >  How to properly center this labels to start from left and other elements stay next to each other?
How to properly center this labels to start from left and other elements stay next to each other?

Time：01-11

How do I align the labels correctly so that they start from the left, and the other elements stay on top of each other?

What I have so far – in the picture, you can see the output – is not correct. I am still learning CSS.

<div >
  <div>
    <label style="font-size: 18px; margin-right: 20px;">Pondělí</label>
    <input  type="checkbox" id="monday-open" name="open"  style="display:inline-block; padding-top: 5px; margin-right: 20px;" />
    <label for="times" style="font-size: 18px; margin-right: 2%;">Od</label>
    <select name="timepicker" id="monday-from"  style="margin-right: 2%;"></select>
    <label for="times" style="font-size: 18px; margin-right: 2%;">Do</label>
    <select name="timepicker" id="monday-from"  style="margin-right: 2%;"></select>
  </div>
  <div style="display:block"></div>
  <div>
    <label style="font-size: 18px; margin-right: 20px;">Úterý</label>
    <input  type="checkbox" id="tuesday-open" name="open"  style="display:inline-block; padding-top: 5px; margin-right: 20px;" />
    <label for="times" style="font-size: 18px; margin-right: 2%;">Od</label>
    <select name="timepicker" id="tuesday-from"  style="margin-right: 2%;"></select>
    <label for="times" style="font-size: 18px; margin-right: 2%;">Do</label>
    <select name="timepicker" id="tuesday-to"  style="margin-right: 2%;"></select>
  </div>
</div>

What it looks like now

Result what i want to:

enter image description here

CodePudding user response：

Firstly understand what's messing up the alignment; it's majorly caused by the variable width of the label. One very basic solution without using complicated CSS properties would be simply giving this label tag a fixed width.

label {
  display: inline-block;
  width: 50px;
  font-size: 18px;
  margin: 0 10px;
}
<div >
  <div>
    <label >Pondělí</label>
    <input  type="checkbox" id="monday-open" name="open"  />
    <label for="times">Od</label>
    <select name="timepicker" id="monday-from" ></select>
    <label for="times">Do</label>
    <select name="timepicker" id="monday-from" ></select>
  </div>
  <div>
    <label>Úterý</label>
    <input  type="checkbox" id="tuesday-open" name="open"  />
    <label for="times">Od</label>
    <select name="timepicker" id="tuesday-from" ></select>
    <label for="times">Do</label>
    <select name="timepicker" id="tuesday-to" ></select>
  </div>
</div>

Note: Avoid using inline CSS if you have to repeat the same styling on multiple tags. Instead, try using classes.

CodePudding user response：

One approach is as follows, using CSS Grid layout:

/* generic CSS reset, so some of the browser defaults
   are overridden to maximise consistency across browsers: */

*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}


/* moving the CSS out of the HTML, in order that all common CSS can
   be easily updated in one place: */

.opening-hours {
  font-size: 18px;
}

.opening-hours>div {
  /* Using CSS Grid layout: */
  display: grid;
  /* defining gaps between adjacent rows to be 1em
     and the gaps between adjacent cells in columns
     to be 0.5em (this is for left-to-right, top-to-bottom
     languages): */
  gap: 1em 0.5em;
  /* we create three columns, each column taking one
     fractional unit of the available space: */
  grid-template-columns: repeat(3, 1fr);
  /* 1em margin above and below the element, and
     auto margins either side in order to horizontally
     center the element within its parent: */
  margin: 1em auto;
  padding: 0.5em;
  /* allowing the width to vary from 30em (minimum) to 90vw
     (viewport-width units, maximum) with a preferred size of
     900px within the minimum and maximum constraints: */
  width: clamp(30em, 900px, 90vw);
}


/* just to help visualise the layout: */

label {
  border: 1px solid #000;
  border-radius: 0.5em;
  padding: 0.5em;
}


/* to ensure visibility of the :focus indicator should the client
   be using keyboard navigation: */

:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #f90;
  outline-offset: 0.1em;
}
<div >
  <div>
    <label for="monday-open">Pondělí
      <input type="checkbox" id="monday-open" name="open">
    </label>
    <label>Od
      <select name="timepicker" id="monday-from" ><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
    <label>Do
      <select name="timepicker" id="monday-to" ><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
    <label>Úterý
      <input  type="checkbox" id="tuesday-open" name="open">
    </label>
    <label>Od
      <select name="timepicker" id="tuesday-from" ><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
    <label>Do
      <select name="timepicker" id="tuesday-to" ><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
  </div>
</div>

JS Fiddle demo.

It's worth noting that I've included the times in the HTML, stripped out the repeated class attributes, removed the for attributes in the <label> since they all referred to the same times element (which wasn't present in the HTML) as it was both invalid, and unable to work. As the <input> and <select> elements are now wrapped within the <label> the association between the <label> and its nested element is implicit, and doesn't require the use of the for attribute; therefore it now works without having to assign id attributes to the various interactive form-elements.

Having just looked at your question again, I've realised that you seem to want your label-text to the left of the nested <input>, or <select> element; to that end the following two lines added to the CSS for the <label> element should satisfy that requirement:

label {
  display: flex;
  justify-content: space-between;
}


*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

.opening-hours {
  font-size: 18px;
}

.opening-hours > div {
  display: grid;
  gap: 1em 0.5em;
  grid-template-columns: repeat(3, 1fr);
  margin: 1em auto;
  padding: 0.5em;
  width: clamp(30em, 900px, 90vw);
}

label {
  display: flex;
  justify-content: space-between;
  border: 1px solid #000;
  border-radius: 0.5em;
  padding: 0.5em;
}

:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #f90;
  outline-offset: 0.1em;
}
<div >
  <div>
    <label for="monday-open">Pondělí
      <input type="checkbox" id="monday-open" name="open">
    </label>
    <label>Od
      <select name="timepicker" id="monday-from" ><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
    <label>Do
      <select name="timepicker" id="monday-to" ><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
    <label>Úterý
      <input  type="checkbox" id="tuesday-open" name="open">
    </label>
    <label>Od
      <select name="timepicker" id="tuesday-from" ><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
    <label>Do
      <select name="timepicker" id="tuesday-to" ><option>00:00</option><option>00:15</option><option>00:30</option><option>00:45</option><option>01:00</option><option>01:15</option><option>01:30</option><option>01:45</option><option>02:00</option><option>02:15</option><option>02:30</option><option>02:45</option><option>03:00</option><option>03:15</option><option>03:30</option><option>03:45</option><option>04:00</option><option>04:15</option><option>04:30</option><option>04:45</option><option>05:00</option><option>05:15</option><option>05:30</option><option>05:45</option><option>06:00</option><option>06:15</option><option>06:30</option><option>06:45</option><option>07:00</option><option>07:15</option><option>07:30</option><option>07:45</option><option>08:00</option><option>08:15</option><option>08:30</option><option>08:45</option><option>09:00</option><option>09:15</option><option>09:30</option><option>09:45</option><option>10:00</option><option>10:15</option><option>10:30</option><option>10:45</option><option>11:00</option><option>11:15</option><option>11:30</option><option>11:45</option><option>12:00</option><option>12:15</option><option>12:30</option><option>12:45</option><option>13:00</option><option>13:15</option><option>13:30</option><option>13:45</option><option>14:00</option><option>14:15</option><option>14:30</option><option>14:45</option><option>15:00</option><option>15:15</option><option>15:30</option><option>15:45</option><option>16:00</option><option>16:15</option><option>16:30</option><option>16:45</option><option>17:00</option><option>17:15</option><option>17:30</option><option>17:45</option><option>18:00</option><option>18:15</option><option>18:30</option><option>18:45</option><option>19:00</option><option>19:15</option><option>19:30</option><option>19:45</option><option>20:00</option><option>20:15</option><option>20:30</option><option>20:45</option><option>21:00</option><option>21:15</option><option>21:30</option><option>21:45</option><option>22:00</option><option>22:15</option><option>22:30</option><option>22:45</option><option>23:00</option><option>23:15</option><option>23:30</option><option>23:45</option></select>
    </label>
  </div>
</div>

JS Fiddle demo.

References:

Bibliography:

CodePudding user response：

First and foremost, remove all your inline margins set. Then you can go to your CSS file and set display: flex; on your parent opening-hoenter. I would set this flex-direction to column. Then you can flex each child div with a row flex-direction and set a gap of 15px. This ensures that each row is aligned with the same spacing. Now you can set an inline margin on div #2 to align the two vertically. I set margin-left: .9rem; on the second div.

.opening-hoenter {
  display: flex;
  flex-direction: column;
}

.opening-hoenter > div {
  display: flex;
  flex-direction: row;
  gap: 15px;
}
<div >
  <div>
    <label style="font-size: 18px;">Pondělí</label>
    <input  type="checkbox" id="monday-open" name="open"  />
    <label for="times" style="font-size: 18px;">Od</label>
    <select name="timepicker" id="monday-from" ></select>
    <label for="times" style="font-size: 18px;">Do</label>
    <select name="timepicker" id="monday-from" ></select>
  </div>

  <div style="margin-left: .9rem;">
    <label style="font-size: 18px;">Úterý</label>
    <input  type="checkbox" id="tuesday-open" name="open"  />
    <label for="times" style="font-size: 18px;">Od</label>
    <select name="timepicker" id="tuesday-from" ></select>
    <label for="times" style="font-size: 18px;">Do</label>
    <select name="timepicker" id="tuesday-to" ></select>
  </div>
</div>

Another option would be to use this same layout but instead of the inline-margin on div #2 you can set your label to have the same width universally so that all elements after that are aligned because the label will have a dynamic width that is set at let's say 10%. You can set an id on that label to define this. In this ex. I called it #fixed-label

See that version here.

.opening-hoenter {
  display: flex;
  flex-direction: column;
}

.opening-hoenter > div {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

label#fixed-label {
  width: 10%;
}
<div >
  <div>
    <label style="font-size: 18px;" id="fixed-label">Pondělí</label>
    <input  type="checkbox" id="monday-open" name="open"  />
    <label for="times" style="font-size: 18px;">Od</label>
    <select name="timepicker" id="monday-from" ></select>
    <label for="times" style="font-size: 18px;">Do</label>
    <select name="timepicker" id="monday-from" ></select>
  </div>

  <div>
    <label style="font-size: 18px;" id="fixed-label">Úterý</label>
    <input  type="checkbox" id="tuesday-open" name="open"  />
    <label for="times" style="font-size: 18px;">Od</label>
    <select name="timepicker" id="tuesday-from" ></select>
    <label for="times" style="font-size: 18px;">Do</label>
    <select name="timepicker" id="tuesday-to" ></select>
  </div>
</div>

Page link：https//www.codepudding.com/database/258320.html

Prev:Why is it returning undefined for the month. JS date
Next:(HTML)Icon is duplicated with unknown reason
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding