CODEWITHSUNDEEP
htmlcss
Michelle Ashwini
Michelle Ashwini

Reputation: 918

Creating an unordered list with image as the list item

I want to create an un-ordered list with an image as the 'bullet point'.

I have the following code:

html

<div class="a-checkpoint-list">
    <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
    </ul>
</div>

css

.a-checkpoint-list{
  list-style-image: url("images/Checkbox.svg");
  list-style-type: none;
  padding-left: 12px;
  font-size:16px;
  text-align:center;
  }

I would like for it to look like the following:

Checkpoint-list

at the center of the page. I cant seem to get it to look this way with my current css code. Any idea where I'm going wrong as I'm fairly new at this.

Updated code

css 

.mc-checkpoint-list > ul{
list-style-image: url('../images/Checkbox.svg');
background-repeat: no-repeat;
line-height: 30px;
padding-left: 30px;
font-size:16px;
}

.a-checkpoint-list{
margin-left:40%;
}

img Test-description

Working Code

css

.mc-checkpoint-list > ul li{
    background-image: url(../images/checkbox.svg);
    list-style-type:none;
    background-repeat: no-repeat;
    line-height: 30px;
    padding-left: 30px;
    font-size:17px;
    margin-top:20px;

}

Upvotes: 1

Views: 4873

Answers (5)

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

Check below code may help you.

div.a-checkpoint-list ul {
  list-style-image: url("http://findicons.com/files/icons/1156/fugue/16/tick_circle_frame.png");
  list-style-type: none;
  margin: 0 auto;
  width: 100px;
}
<div class="a-checkpoint-list">
    <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
    </ul>
</div>

Upvotes: 0

Anubhav pun
Anubhav pun

Reputation: 1323

.a-checkpoint-list ul {
  list-style-image:url("images/Checkbox.svg");
  list-style-type:none;
  margin:0px auto;
  font-size:16px;
  width: 200px;
  vertical-align:middle;
}

<div class="a-checkpoint-list">
    <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
    </ul>
</div>

may this helps you

Upvotes: 1

Remya R
Remya R

Reputation: 157

You need to change the css as follows

 .a-checkpoint-list {
  padding-left: 12px;
  font-size:16px;
  text-align:center;
  }
  ul {
    list-style-image: url('images/Checkbox.svg');
 }

Upvotes: 0

satya
satya

Reputation: 1185

Try This:

<html>
<head>

<style>
.a-checkpoint-list{width:200px;margin:0 auto}

.a-checkpoint-list ul{
  list-style-image: url("download.jpg");
  list-style-type: none;
  padding-left: 12px;
  font-size:16px;

  }
</style>
 </head>
 <body>
<div class="a-checkpoint-list">
    <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
    </ul>
</div> 
</body>
</html>

Upvotes: 1

ketan
ketan

Reputation: 19341

Just simple:

ul {
    list-style-image: url('imagename.svg');
}

For you it should be like:

.a-checkpoint-list > ul {
    list-style-image: url('https://i.sstatic.net/LaaDU.png');
}
<div class="a-checkpoint-list">
    <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
    </ul>
</div>

Upvotes: 3

Related Questions