Line breaker with CSS - Html

EnmanuelDeLosSantosCruz
February 25, 2023
226 views
2 votes
5 Answers

I have a checkbox in my form. Here is the code:

input[type="checkbox"] {
  transform: scale(1.3);
  text-align: center;
  padding: 5px;
  display: inline;
}
div.checkbox label {
  display: inline;
  /* margin-left: .5rem; */

     <div class="checkbox">
        <h2>Choose your favorites programming languages (optional)</h2>
        <input type="checkbox" name="js" id="js" value="JavaScript"/>
        <label for="js">JavaScript</label> <br>
        <input type="checkbox" name="python" id="python" value="Python"/>
        <label for="python">Python</label> <br>
        <input type="checkbox" name="java" id="java" value="Java"/>
        <label for="java">Java</label> <br>
        <input type="checkbox" name="c" id="c" value="C"/>
        <label for="c">C</label> <br>
        <input type="checkbox" name="c++" id="c++" value="C++"/>
        <label for="c++">C++</label> <br>
        <input type="checkbox" name="c#" id="c#" value="C#"/>
        <label for="c#">C#</label> <br>
        <input type="checkbox" name="php" id="php" value="PHP"/>
        <label for="php">PHP</label> <br>
        

        
    </div>

I would like to get the same result but without using the <br> tag, how can I implement this on my code?

Answers

add display:block css property to your parent div

     <div class="checkbox" style="display:block">
        <h2>Choose your favorites programming languages (optional)</h2>
        <input type="checkbox" name="js" id="js" value="JavaScript"/>
        <label for="js">JavaScript</label> 
        <input type="checkbox" name="python" id="python" value="Python"/>
        <label for="python">Python</label>
        <input type="checkbox" name="java" id="java" value="Java"/>
        <label for="java">Java</label>
        <input type="checkbox" name="c" id="c" value="C"/>
        <label for="c">C</label> 
        <input type="checkbox" name="c++" id="c++" value="C++"/>
        <label for="c++">C++</label> 
        <input type="checkbox" name="c#" id="c#" value="C#"/>
        <label for="c#">C#</label> 
        <input type="checkbox" name="php" id="php" value="PHP"/>
        <label for="php">PHP</label> 
        

        
    </div>

You could add pseudo elements after the labels that are set to display: block;.

input[type="checkbox"] {
  transform: scale(1.3);
  text-align: center;
  padding: 5px;
  display: inline;
}
div.checkbox label {
  display: inline;
  /* margin-left: .5rem; */
}
div.checkbox label::after {
    content: '';
    display:block;
}

     <div class="checkbox">
        <h2>Choose your favorites programming languages (optional)</h2>
        <input type="checkbox" name="js" id="js" value="JavaScript"/>
        <label for="js">JavaScript</label>
        <input type="checkbox" name="python" id="python" value="Python"/>
        <label for="python">Python</label>
        <input type="checkbox" name="java" id="java" value="Java"/>
        <label for="java">Java</label>
        <input type="checkbox" name="c" id="c" value="C"/>
        <label for="c">C</label>
        <input type="checkbox" name="c++" id="c++" value="C++"/>
        <label for="c++">C++</label>
        <input type="checkbox" name="c#" id="c#" value="C#"/>
        <label for="c#">C#</label>
        <input type="checkbox" name="php" id="php" value="PHP"/>
        <label for="php">PHP</label>
        

        
    </div>

use the CSS pseudo-element with the content property

div.checkbox label::after {
  content: "A";
  white-space: pre;
}

<head>
  <style>
    div.checkbox label::after {
      content: "A";
      white-space: pre;
    }
  </style>
</head>
<body>
  <div class="checkbox">
    <h2>Choose your favorite programming languages (optional)</h2>
    <input type="checkbox" name="js" id="js" value="JavaScript"/>
    <label for="js">JavaScript</label>
    <input type="checkbox" name="python" id="python" value="Python"/>
    <label for="python">Python</label>
    <input type="checkbox" name="java" id="java" value="Java"/>
    <label for="java">Java</label>
    <input type="checkbox" name="c" id="c" value="C"/>
    <label for="c">C</label>
    <input type="checkbox" name="c++" id="c++" value="C++"/>
    <label for="c++">C++</label>
    <input type="checkbox" name="c#" id="c#" value="C#"/>
    <label for="c#">C#</label>
    <input type="checkbox" name="php" id="php" value="PHP"/>
    <label for="php">PHP</label>
  </div>
</body>

I’d probably go and add some more elements to the mix. This gives you more flexibility and control if you want to style individual bits of your markup and it is also more scalable.

Some of your styles had no effect on the checkbox, so I removed them. I recommend using flexbox or grid for layout nowadays – they are really powerful.

Furthermore, I applied the checkbox transform to the input itself rather than all the inputs in the DOM. If you want to have this as the default of the whole website, you can use your input[type=checkbox] instead. Otherwise, it is better to have it bound to a specific component / class.

The approach of using pseudo-elements works too, but they are quite limited in what you can do with them. The markup should follow the design i.e. you semantically describe what is going on and using plain HTML elements is arguably better for SEO and the overall DOM-Structure so use pseudo-elements sparingly.

.question__option-group {
  display: flex;
  column-gap: 10px;
}

.question__option-group input {
  transform: scale(1.3);
}

<div class="question">
  <h2 class="question__title">Choose your favorites programming languages (optional)</h2>
  <div class="question__options">
    <div class="question__option-group">
      <input type="checkbox" name="js" id="js" value="JavaScript" />
      <label for="js">JavaScript</label>
    </div>
    <div class="question__option-group">
      <input type="checkbox" name="python" id="python" value="Python" />
      <label for="python">Python</label>
    </div>
    <div class="question__option-group">
      <input type="checkbox" name="java" id="java" value="Java" />
      <label for="java">Java</label>
    </div>
    <div class="question__option-group">
      <input type="checkbox" name="c" id="c" value="C" />
      <label for="c">C</label>
    </div>
    <div class="question__option-group">
      <input type="checkbox" name="c++" id="c++" value="C++" />
      <label for="c++">C++</label>
    </div>
    <div class="question__option-group">
      <input type="checkbox" name="c#" id="c#" value="C#" />
      <label for="c#">C#</label>
    </div>
    <div class="question__option-group">
      <input type="checkbox" name="php" id="php" value="PHP" />
      <label for="php">PHP</label>
    </div>
  </div>
</div>

i recommend separating every input and label using a wrapper div , that will makes it more readable and adjustable .

the CSS pseudo-element solution is Applicable
but Using pseudo-elements is still discouraged when serving content that should be accessible.

<div class="checkbox">
  <h2>Choose your favorites programming languages (optional)</h2>
  <div>
    <input type="checkbox" name="js" id="js" value="JavaScript" />
    <label for="js">JavaScript</label>
  </div>
  <div>
    <input type="checkbox" name="python" id="python" value="Python" />
    <label for="python">Python</label>
  </div>
  <div>
    <input type="checkbox" name="java" id="java" value="Java" />
    <label for="java">Java</label>
  </div>
  <div>
    <input type="checkbox" name="c" id="c" value="C" />
    <label for="c">C</label>
  </div>
  <div>
    <input type="checkbox" name="c++" id="c++" value="C++" />
    <label for="c++">C++</label>
  </div>
  <div>
    <input type="checkbox" name="c#" id="c#" value="C#" />
    <label for="c#">C#</label>
  </div>
  <div>
    <input type="checkbox" name="php" id="php" value="PHP" />
    <label for="php">PHP</label>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Line breaker with CSS – Html

Answers