How to get a checkbox to align with text from both sides-CodePudding

So I've just started to learn HTLM and CSS, so to learn I'm just going trough some easy to do examples. But I'm stuck on getting the checkbox to align with the texts I want to align it to.

The example I'm following

And this is how mine looks at the moment:

My copy of the example

As you can see it's not an exact copy of the example and I've tried for some hours now but can't figure it out.

This is my code:

p {
  display: table-row;
}

label {
  display: table-cell;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
}

textarea {
  vertical-align: middle;
}

.checkbox {
  display: flex;
}

<p>
  <label for="förnamn"> * Förnamn: </label>
  <input id="förnamn" type="text">
</p>
<p>
  <label for="efternamn"> * Efternamn: </label>
  <input id="efternamn" type="text">
</p>
<p>
  <label for="adress"> * Adress: </label>
  <input id="adress" type="text">
</p>
<p>
  <label for="e-post"> * E-post: </label>
  <input id="e-post" type="text">
</p>
<p>
  <label for="ålder">Ålder: </label>
  <select name="ålder" id="Ålder">
    <option value="över_18">Över 18</option>
    <option value="under_18">Under 18</option>
  </select>
</p>
<p>
  <label for="meddelande">Meddelande: </label>
  <textarea name="meddelande" id="meddelande" cols="18" rows="2"></textarea>
</p>

<p>
  <label for="välj">Välj låtar och media: </label>
</p>
<p >
  <label for="ringnes-ronny">Ringnes-Ronny</label>

  <label><input type="checkbox">Polisen</label>
  <label>59 SEK</label>

  <label><input type="checkbox">Valhalla</label>
  <label for="39-sek">39 SEK</label>

  <label><input type="checkbox">Polisen</label>
  <label for="49-sek">49 SEK</label>

  <label><input type="checkbox">Monster</label>
  <label for="59-sek">39 SEK</label>
</p>

I'm sorry if the code is sloppy, haven't figured out the whole structure yet but I hope its readable. I've tried to change the display of the .checkbox but none of them does what I would want. Tried the align and vertical-align but they don't move at all.

CodePudding user response：

Looks like you had a pretty good start on it. I would put the items that I want to be beside each other into a flexbox, and I just moved the labels around so they would be where they are in the example that your following.

display: flex Is super powerful, I HIGHLY reccommend playing flexbox froggy to get a bit more comfortable with it in a fun and engaging way.

Another great tool that is used often to display thing how you want is display: grid and there is an online game for that one as well called grid garden.

p {
    display: table-row;
}

label {
    display: table-cell;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    vertical-align: middle;
}

textarea {
    vertical-align: middle;
}

.checkbox {
    display:flex;
}
.flex {
  display: flex;
  justify-content: space-between;
  padding-left: 4em;
}

<!DOCTYPE html>
<html>

<head>
    <title> Lab1 </title>
    
</head>

<body>
    <p>
        <label for="förnamn"> * Förnamn: </label>
        <input id="förnamn" type="text">
    </p>
    <p>
        <label for="efternamn"> * Efternamn: </label>
        <input id="efternamn" type="text">
    </p>
    <p>
        <label for="adress"> * Adress: </label>
        <input id="adress" type="text">
    </p>
    <p>
        <label for="e-post"> * E-post: </label>
        <input id="e-post" type="text">
    </p>
    <p>
        <label for="ålder">Ålder: </label>
        <select name="ålder" id="Ålder">
            <option value="över_18">Över 18</option>
            <option value="under_18">Under 18</option>
        </select>
    </p>
    <p>
        <label for="meddelande">Meddelande: </label>
        <textarea name="meddelande" id="meddelande" cols="18" rows="2"></textarea>
    </p>

    <p>
        <label for="välj">Välj låtar och media: </label>
    </p>
    <p >
        <div >
          <label><input type="checkbox">Polisen</label>
          <label >59 SEK</label>
        </div>
        
        <div >
          <label><input type="checkbox">Valhalla</label>
          <label for="39-sek">39 SEK</label>
        </div>
        
        <label for="ringnes-ronny">Ringnes-Ronny</label>
        
        <div >
          <label><input type="checkbox">Polisen</label>
          <label for="49-sek">49 SEK</label>
        </div>
        
        <div >
          <label><input type="checkbox">Monster</label>
          <label for="59-sek">39 SEK</label>
        </div>
    </p>
</body>

</html>

CodePudding user response：

Based on the image supplied try the following. I've replaced p with a fieldset as this is what a collection of check boxes is.

.checkbox {
  /*Remove the border from the fieldset*/
  border: 0;
  /*Flex disply*/
  display:flex;  
  /*Start aligning to the left*/
  justify-content: flex-start;
  /*Vertical align center*/
  align-items: center;
}

.title {padding-right:1em;}
.boxContainer {
  /*Give the container some width*/
  min-width:40vh;
}

.checkbox label {
  /*Set labels to display be block elements*/
  display: block;
  /*Position relative so child elements are postions relative to this object*/
  position: relative;
  /*A little spacing*/
  margin-bottom: 0.25em;
}

.checkbox label input {
  /*A litle more spacing*/
  margin-right: 0.5em;
}

.checkbox .time {
  /*Set our time elements to be absolutely positioned*/
  position: absolute;
  /*THen move them to the right.*/
  right: 0
}

<fieldset >
  <div >Ringnes-Ronny</div>
  <div >
    <label><input type="checkbox">Polisen<span >59 SEK</span></label>
    <label><input type="checkbox">Valhalla<span >39 SEK</span></label>
    <label><input type="checkbox">Polisen<span >49 SEK</span></label>
    <label><input type="checkbox">Monster<span >39 SEK</span></label>
  </div>
</fieldset>

CodePudding user response：

maybe that...

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 14px;
}
#my-form > label {
  display     : block;
  width       : 24rem;
  min-height  : 2.5rem;
  font-size   : .9rem;
  line-height : 2rem;
  }
#my-form > label input[type=text],
#my-form > label select,
#my-form > label textarea  {
  font-size  : 1rem;
  float      : right;
  box-sizing : border-box;
  width      : 18rem;
 }
 #my-form > h3  {
  margin : 2.5rem 0 0 0;
  }
#my-form > fieldset  {
  display               : grid;
  grid-template-columns : 8rem 16rem;
  border                : none;
  margin                : 0;
  padding               : 0;
  font-size             : 1rem;
  }
#my-form > fieldset legend {
  transform: translateY(2rem);
  } 
#my-form > fieldset label {
  grid-column      : 2;
  } 
#my-form > fieldset label span {
  float  : right;
  }

<form id="my-form">
  <label> 
    * Förnamn:
    <input name="förnamn" type="text">
  </label>
  <label> 
    * Efternamn:
    <input name="efternamn" type="text"> 
  </label>
  <label> 
    * Adress: 
    <input name="adress" type="text">
  </label>
  <label> 
    * E-post:
    <input name="e-post" type="text"> 
  </label>
  <label>
    Ålder: 
    <select name="ålder">
      <option value="över_18">Över 18</option>
      <option value="under_18">Under 18</option>
    </select>
  </label>
  <label>
    Meddelande: 
    <textarea name="meddelande" id="meddelande" rows="2"></textarea>
  </label>

  <h3> Välj låtar och media: </h3>
  <fieldset> 
    <legend>  Ringnes-Ronny </legend>
    <label>
      <input type="checkbox" name="Polisen" value="59">
      Polisen
      <span>59 SEK</span>
    </label>
    <label>
      <input type="checkbox" name="Valhalla" value="39">
      Valhalla
      <span>39 SEK</span>
    </label>
    <label>
      <input type="checkbox" name="Polisen" value="49">
      Raggare pä stureplan
      <span>49 SEK</span>
    </label>
    <label>
      <input type="checkbox" name="Monster" value="39">
      Monster
      <span>39 SEK</span>
    </label>
  </fieldset>
  
 </form>