CODEWITHSUNDEEP
htmlcss
BruceyBandit
BruceyBandit

Reputation: 4334

How to indent list in HTML

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>[email protected]</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>

Upvotes: 0

Views: 2062

Answers (4)

Andre Silva
Andre Silva

Reputation: 21

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>[email protected]</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>

Upvotes: 2

robartsd
robartsd

Reputation: 1470

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;
}

Upvotes: 1

Samuel
Samuel

Reputation: 6146

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>[email protected]</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?

Upvotes: 0

akash maurya
akash maurya

Reputation: 656

**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;

Upvotes: 0

Related Questions