-3

So what I would like to achieve is a numbered bullet list with the further sentences be lined up underneath the sentences like below:

  1. This is the first sentence and the second sentence of the first bullet point needs to be underneath the sentence and not the number.
  2. The second bullet has to be the same and the number needs to be aligned with the '1.' as well.

I am using Wordpress 6.3 with the latest version of Elementor & Elementor Pro and this is the full HTML for the numbered list:

<h6 style="text-align: left;"><strong>By entering the Cairns Central Fashions on the Field Competition at the 2023 Cairns Amateurs Ladies Day and Cairns Amateur Cup Day, you are bound by the following terms and conditions:</strong></h6>
<ol>
    <li style="text-align: left;">Rules on how to enter form part of the terms and conditions of entry.</li>
    <li style="text-align: left;">Entry may be refused if a contestant does not meet one or all of the contestant criteria, which are available at the registration desk on the day.</li>
    <li style="text-align: left;">Contestants must be 18 years of age or more on the day of the competition that they are entering. Proof of age may be requested at the time of registration.</li>
    <li style="text-align: left;">The Promoters are the Far North Queensland Amateur Turf Club.</li>
    <li style="text-align: left;">The Promoters shall select the judging panel including the Judges and the Guest Judge.</li>
    <li style="text-align: left;">There are three (3) registered categories on Friday 8<sup>th</sup> September 2023:
<ol type="a">
    <li>Gold Class Ladies Racewear;</li>
    <li>Open Ladies Racewear; and</li>
    <li>Local Ladies Racewear.</li>
</ol>
</li>
    <li style="text-align: left;">There are four (4) registered categories on Saturday 9<sup>th</sup> September: 2023
<ol type="a">
    <li>Best Dressed Couple;</li>
    <li>Open Ladies Classic Racewear;</li>
    <li>Open Men’s Racewear; and</li>
    <li>Open Ladies Contemporary Racewear.</li>
</ol>
</li>
    <li style="text-align: left;">There are two (2) bonus categories being:
<ol type="a">
    <li>Best Millinery awarded on Friday, 8<sup>th</sup> September 2023; and</li>
    <li>Carnival Champion awarded on Saturday, 9<sup>th</sup> September 2023.</li>
</ol>
</li>
    <li style="text-align: left;">Contestants must register their details on the day at the FOTF Registration Desk to enter the competition and be allotted an entrant number and paddle.</li>
    <li style="text-align: left;">Contestants who fail to register in time or are not present in time will be disqualified and will not be eligible to enter.</li>
    <li style="text-align: left;">Judging will be undertaken by a panel of a minimum of three (3) judges and winners will be chosen by totalling points awarded by the Judges at their absolute discretion.  The Judges’ decision is final and no correspondence will be entered into regarding same.</li>
    <li style="text-align: left;">Judges will judge contestants on the criteria advised by the Promoters via the Promoters’ website which is available to all Contestants.</li>
    <li style="text-align: left;">A winner and runner up will be named for each registered category on both Friday, 8th September and Saturday, 9th September 2023.</li>
    <li style="text-align: left;">Local Ladies Racewear Contestants must reside in one of the following regions: Aurukun, Cairns, Cassowary Coast, Cook (including Coen and Laura), Croydon, Douglas, Etheridge, Hope Vale, Kowanyama, Lockhart River, Mapoon, Mareeba, Mossman Gorge, Napranum, Northern Peninsula Area, Pormpuraaw, Tablelands, Torres Shire Council, Torres Strait Island Regional Council, Weipa, Wujal Wujal and Yarrabah.  Proof of residence must be supplied by Contestants if requested by the Promoters.</li>
    <li style="text-align: left;">Best Millinery will be awarded by a Guest Judge at the Guest Judge’s absolute discretion.  All Contestants who have entered the registered categories on Friday, 8th September 2023 will automatically be entered in the Best Millinery Bonus Category.  The Guest Judge’ decision is final and no correspondence will be entered into regarding same.</li>
    <li style="text-align: left;">Carnival Champion will be selected by the Carnival Ambassador from the winners and runners up of the registered categories on Saturday 9th September 2023.  The penultimate year’s Carnival Champion is ineligible to win Carnival Champion the following year (2023).  The Carnival Champion remains eligible to enter the Fashions on the Field competition and win the registered categories.  The Carnival Ambassador’s decision is final and no correspondence will be entered into regarding same.</li>
    <li style="text-align: left;">Prizes are non-transferable, non-exchangeable and not redeemable for cash.</li>
    <li style="text-align: left;">Contestants and/or their outfits are not permitted to promote commercially a brand, store, or design.</li>
    <li style="text-align: left;">Contestants may not enter the competition on behalf of a third party. You are not to model outfits for another person.</li>
    <li style="text-align: left;">Contestants must not receive any compensation or payment from a third party for entering the competition.</li>
    <li style="text-align: left;">All prizes awarded to the contestant must remain the property of the contestant.</li>
    <li style="text-align: left;">All travel and accommodation prizes must be taken as specified. Conditions to travel and accommodation apply and are subject to availability.</li>
    <li style="text-align: left;">Winners will be notified on the day of the event.</li>
    <li style="text-align: left;">The following individuals are ineligible to participate in the Fashions on the Field Competition:
<ol type="a">
    <li>Staff and immediate family members of the Promoters, sponsors and prize suppliers and their partners;</li>
    <li>Staff of Cairns Jockey Club and their partners;</li>
    <li>Current and past Carnival Ambassadors and their partners;</li>
    <li>Current and past Judges and their partners for a period of five (5) years.</li>
</ol>
</li>
    <li style="text-align: left;">All entries become property of the Promoters and may be entered into a database and the Promoters may use Contestants' names and addresses for future promotional, marketing and publicity purposes.</li>
    <li style="text-align: left;">Prizes are subject to change at the discretion of the Promoters.</li>
    <li style="text-align: left;">Entrants agree that their names and photographs may be used by the promoters and sponsors for future marketing purposes.</li>
    <li style="text-align: left;">Whilst every effort will be made to run as per the schedule, the nature of this event will at times involve moving times around.</li>
    <li style="text-align: left;">Contestants must not display any antisocial behaviour or make any disparaging or derogatory comments in any form (whether in person or online) about the Promoters, any associated competitions, any associated sponsors or any Fashions on the Field Contestants.  Behaviour of this sort will not be tolerated.</li>
    <li style="text-align: left;">If a Contestant is in breach of any of the terms and conditions above, the Promoters reserve the right to disqualify the Contestant from the Fashions on the Field competition.</li>
</ol>

When I inputted all the information, the bullets were all over the place as per below:

Numbers misaligned

I've added the following custom CSS which at the very least seems to have aligned the numbers:

ol{
    list-style-position: inside;
    margin-left: -10px;
}

Numbers are aligned but the second line is underneath the bullet point

However, from the second line onwards of every bullet point is underneath the numbered bullet rather than the start of the sentence. How would it possible to achieve this?

What I want is:

  1. Hello this is the first sentence and I am all good. However, this second sentence is underneath the text.

What I'm getting:

1.Hello this is the first sentence and I am all good. However, this second sentence is underneath the number and not the text. It needs to be indented.

Matt
  • 9
  • 2
  • https://stackoverflow.com/questions/10428720/how-to-keep-indent-for-second-line-in-ordered-lists-via-css – Paulie_D Aug 23 '23 at 05:54
  • 1
    You are required to post a [mcve] here, **within your question**, and [not a link](https://meta.stackoverflow.com/a/254430/162698) to any other site. – Rob Aug 23 '23 at 07:22
  • Thanks for the link @Paulie_D but I had tried those solutions before posting and unfortunately they didn't resolve my issue. – Matt Aug 24 '23 at 02:38
  • Thanks for the comment @Rob - this has been updated now. – Matt Aug 24 '23 at 02:39
  • Your demo does not appear to show the issue, can you post an image? – Paulie_D Aug 24 '23 at 06:12
  • The decimal points in your image line up precisely: https://i.stack.imgur.com/ZeCh3.png What kind of alignment are you trying to achieve? – ChrisGPT was on strike Aug 24 '23 at 18:22
  • @Paulie_D - I've updated the images now and the description a bit more to make it sense (hopefully). – Matt Aug 24 '23 at 23:44
  • @ChrisGPTwasonstrike - It's not the decimal points that I was concerned with but the numbers themselves. Images have been updated and with the list-style-poistion:inside it has adjusted the alignment but not of the further sentences. – Matt Aug 24 '23 at 23:44
  • @Matt, the numbers line up perfectly, too. They're just right-aligned. Are you asking how to align them on the _left?_ `list-style-position: inside` is behaving as it's supposed to. [Its whole point is to put the number inside the list content](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position) as you are showing. [Does this answer your question](https://stackoverflow.com/q/14347290/354577)? – ChrisGPT was on strike Aug 25 '23 at 13:08
  • Hi @ChrisGPTwasonstrike - no for the bullets I managed to sort it out as I stated in the question, my issue is that the second sentence (or more) in every bullet point is coming under the number and not under the first sentence text: https://i.stack.imgur.com/pRXwZ.png – Matt Aug 27 '23 at 23:31
  • Again, that's what `list-style-position: inside` is _supposed to do_. I still don't understand how you want this to look. – ChrisGPT was on strike Aug 27 '23 at 23:51
  • Ok so if that's the case then list-style-position: inside is not working properly for me. I've updated the question at the end as in the comment section the layout doesn't show properly. – Matt Aug 27 '23 at 23:55
  • No, it's working exactly as designed. It's supposed to do what it's doing. Please read the MDN link I provided earlier. – ChrisGPT was on strike Aug 28 '23 at 00:43

0 Answers0