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

Html – How can I move bullet together with list item

<ul class="list">
    <section class="info2">
        <li> id="airtime">
            <span>                            
                AIRTIME TOP UP
            </span>
        </li>
        <li id="data">
            <span>
                DATA RECHARGE
            </span>
        </li>
        <li id="account">
            <span>
                ACCOUNT OPENING
            </span>
        </li>
    </section>
</ul>

.list {
    list-style-type: square;
    list-style-position: inside;
    position: relative;
    right: 40px;
    text-indent: 10px;
    bottom: 15px;
    font-family: tusker;
}
.info2 {
    font-size: 13px;
    position: relative;
    text-indent: 20px;
}
#airtime {
    border: 1px solid coral;
}
#data {
    border: 1px solid coral;
}
#account {
        border: 1px solid coral;
}

I want bullet and the list item to move right, inside the border. I tried using margin but it moves the border instead and when I try using left it moves list item away from bullet

Tags:

2

Answers


  1. 0

    Here is what you wanted. Use padding instead of margin. The distance between the border and the content is padding.

            .list {
            list-style-type: square;
            list-style-position: inside;
            position: relative;
            right: 40px;
            text-indent: 10px;
            bottom: 15px;
            font-family: tusker;
        }
        .info2 {
            font-size: 13px;
            position: relative;
            text-indent: 20px;
        }
        #airtime {
            border: 1px solid coral;
            text-align: right;
            padding-right: 20px;
        }
        #data {
            border: 1px solid coral;
            text-align: right;
            padding-right: 20px;
        }
        #account {
            border: 1px solid coral;
            text-align: right;
            padding-right: 20px;
        }
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <ul class="list">
        <section class="info2">
            <li id="airtime">
                <span>                            
                    AIRTIME TOP UP
                </span>
            </li>
            <li id="data">
                <span>
                    DATA RECHARGE
                </span>
            </li>
            <li id="account">
                <span>
                    ACCOUNT OPENING
                </span>
            </li>
        </section>
    </ul>
    
    
</body>
</html>
    Login or Signup to reply.
  2. 0

    Looks like you are looking for padding-left 🙂
    Also there is an error in your html snippet, first li tag closes prematurely.

    .list {
    list-style-type: square;
    list-style-position: inside;
    position: relative;
    right: 40px;
    text-indent: 10px;
    bottom: 15px;
    font-family: tusker;        
}
.list li {
  padding-left: 30px; <-- YOUR VALUE GOES HERE
}
.info2 {
    font-size: 13px;
    position: relative;
    text-indent: 20px;
}
#airtime {
    border: 1px solid coral;
}
#data {
    border: 1px solid coral;
}
#account {
        border: 1px solid coral;
}
    <ul class="list">
    <section class="info2">
        <li id="airtime">
            <span>                            
                AIRTIME TOP UP
            </span>
        </li>
        <li id="data">
            <span>
                DATA RECHARGE
            </span>
        </li>
        <li id="account">
            <span>
                ACCOUNT OPENING
            </span>
        </li>
    </section>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search