如何在 HTML 中缩进列表

Question

I am having a small issue when it comes to creating an indented list. I thought of posting the html and have someone's help on what the css should be.

Basically it should say the link 'It's a very simple process' and this should not have a bullet point, it's just a sentence.

Then below that line (no space between), the ordered list should should be indented within.

How to do this?

 <ul class="nobullet"> <li>It's a very simple process: <ol> <li>Send an email to <b>xxx@xxx.com</b> requesting to join our talent pool along with your CV attached.</li> <li>We will send you a form to complete where you can state your preferred roles and locations.</li> <li>You relax and we will communicate with our business clients on a weekly basis for available roles.</li> <li>We will send you job specifications that match your preference.</li> </ol> </li> </ul>

Answer 1

Not sure about the indenting.. you mean you want the 1,2,3 to be indented as well?

for the bullet point just add "list-style-type: none" to your class in the css.

 .nobullet{ list-style-type: none; }

 <ul class="nobullet"> <li>It's a very simple process: <ol> <li>Send an email to <b>xxx@xxx.com</b> requesting to join our talent pool along with your CV attached.</li> <li>We will send you a form to complete where you can state your preferred roles and locations.</li> <li>You relax and we will communicate with our business clients on a weekly basis for available roles.</li> <li>We will send you job specifications that match your preference.</li> </ol> </li> </ul>

Answer 2

Perhaps think about changing the HTML then. If " It's a very simple process: " is not a bullet point then simply change it to a <h3> or <h4> . You need to think about accessability too...

 <h3>It's a very simple process:</h3> <ol> <li>Send an email to <b>xxx@xxx.com</b> requesting to join our talent pool along with your CV attached.</li> <li>We will send you a form to complete where you can state your preferred roles and locations.</li> <li>You relax and we will communicate with our business clients on a weekly basis for available roles.</li> <li>We will send you job specifications that match your preference.</li> </ol>

Do you plan to have more <li> elements in your unordered list?

Answer 3

**just put

put this text: It's a very simple process -> in h1 tag or any

in place of list tag

this tag it does not need**

add in css:

list-style:none;

Answer 4

You can change the marker with the list-style-type property.

ul.nobullet {
  list-style-type: none;
}

If you want to change the indentation, you can use padding and margin values. When styling list indentation, I like to set both padding-left and margin-left for both the list and list item elements to ensure that indentation from both padding and margin are set as desired (I'm not sure that all browsers indent their lists with the same properties). This will indent all lists 4 ems:

ul, 0l {
  margin-left: 0;
  padding-left: 4em;
}
li {
  margin-left: 0;
  padding-left: 0;
}