Question 272876 in Html Question posted in
Some basic documentation can be found here.

Html – Aligning checkboxes to the right of text

enter image description here

Can someone suggest me ,how to bring the check box to the right of the letter because by default it is aligned to the left.

<title>Page title</title>

<h1>My feedback form</h1>

<form>

<ul>

    <li>Name: <input name="name" type="text"></li>

    <li>Email: <input name="email" type="email"></li>

    <li>Password: <input name="Password" type="Password"></li><br>

    <li>Please check all the emoticons that apply to you:</li>

    <ul type="disc">

        <li><input type="checkbox" name="emoticon 1" value="angry"> Angry</li>

        <li><input type="checkbox" name="emoticon 2" value="Sad"> Sad</li>

        <li><input type="checkbox" name="emoticon 3" value="Happy"> Happy</li></li>

        <li><input type="checkbox" name="emoticon 4" value="Ambivalent"> Ambivalent</li></ul>

        <li>How satisfied were you with pur service?</li>

      

       <ul type="disc">

            <li><input type="radio" name="rating 1" value="very satisfied"> Very satisfied</li>

            <li><input type="radio" name="rating 2" value="Satisfied">Satisfied</li>

            <li><input type="radio"

name="rating 3" value="Didn’t care">Didn’t care 

            <li><input type="radio" 

name="rating 4" value="Dissatisfied">Dissatisfied</li>

           <li><input type="radio" name="rating 5" value="very dissatisfied">Very dissatisfied</li>

   </ul>
  • Further comments: 
    </ul></form></body></html>

    This is the code that i typed

    • Tags:

    2

    Answers


    1. 0

      You can make the checkboxes as inline-block elements

      <head>
    <title>Page title</title>
    <style>
        ul.checklist {
            list-style-type: none;
            padding: 0;
        }

        ul.checklist li {
            margin-bottom: 10px;
        }

        ul.checklist li label {
            display: inline-block;
            width: 150px;
        }

        ul.checklist li input[type="checkbox"] {
            display: inline-block;
            width: 20px;
        }
    </style>
</head>
<body>
    <h1>My feedback form</h1>
    <form>
        <ul class="checklist">
            <li>
                <label for="emoticon1">Angry:</label>
                <input type="checkbox" id="emoticon1" name="emoticon1" value="angry">
            </li>
            <li>
                <label for="emoticon2">Sad:</label>
                <input type="checkbox" id="emoticon2" name="emoticon2" value="Sad">
            </li>
            <li>
                <label for="emoticon3">Happy:</label>
                <input type="checkbox" id="emoticon3" name="emoticon3" value="Happy">
            </li>
            <li>
                <label for="emoticon4">Ambivalent:</label>
                <input type="checkbox" id="emoticon4" name="emoticon4" value="Ambivalent">
            </li>
    </form>
</body>
      Login or Signup to reply.
    2. 0

      You can using flexbox with flex-direction: row-reverse is a effective way to position the checkboxes to the right.

      This is update code:

              ul.checklist {
            list-style-type: none;
            padding: 0;
            float:left;
        }

        ul.checklist li {
            margin-bottom: 10px;
            display: flex;
            flex-direction: row-reverse; 
            align-items: center;
            
        }

        ul.checklist li label {
            margin-left: 10px;
            
        }
      <!DOCTYPE html>
<html>
<head>
    <title>Page title</title>

</head>
<body>
    <h1>My feedback form</h1>
    <form>
        <ul class="checklist">
            <li>
                <input type="checkbox" id="emoticon1" name="emoticon1" value="angry">
                <label for="emoticon1">Angry:</label>
            </li>
            <li>
                <input type="checkbox" id="emoticon2" name="emoticon2" value="Sad">
                <label for="emoticon2">Sad:</label>
            </li>
            <li>
                <input type="checkbox" id="emoticon3" name="emoticon3" value="Happy">
                <label for="emoticon3">Happy:</label>
            </li>
            <li>
                <input type="checkbox" id="emoticon4" name="emoticon4" value="Ambivalent">
                <label for="emoticon4">Ambivalent:</label>
            </li>
        </ul>
    </form>
</body>
</html>
      Login or Signup to reply.
    Please signup or login to give your own answer.

    Back To Top
    Search