Avatar of SAbboushi
SAbboushi
Flag for United States of America asked on

Something like a 'clear' attribute for <li> elements?

Is there an attribute or some other mechanism I can use to cause the <li> containing "Item 4:1" to display on the next line (i.e. as if there wasn't enough space for it to fit on the current line even though there is enough space).  Something like the "clear" attribute for floats?  I need a mechism to do this whenever the first <li> element (first of 3 in the <ul>) matches specific criteria.  Thanks--

 
<style>

      ul.ltr#word-by-word-units
      {
        border: 1px solid red;*/
        margin: 0;
        padding: 0;
        direction: ltr;
        text-align: left;
      }


      ul#word-by-word-units li {
        display: inline-block;
        vertical-align: top;
        border: 1px solid Gainsboro;
        margin: 0;
        padding: 0;
      }

      ul#word-by-word-fields
      {
        list-style-type: none; /* no "markers" i.e. bullets */
        border: 1px solid green;
        margin: 0 0 15px 0; /* between each <ul> */
        padding: 0;
      }

      ul#word-by-word-fields li
      {
        vertical-align: top;
        border: 1px solid blue;
        display: block;
        padding: 5px;
      }
</style>

<ul id="word-by-word-units" class="ltr"><li><ul id="word-by-word-fields"><li>Item 1:1</li><li>Item 1:2</li><li>Item 1:3</li></ul><li><ul id="word-by-word-fields"><li>Item 2:1</li><li>Item 2:2</li><li>Item 2:3</li></ul><li><ul id="word-by-word-fields"><li>Item 3:1</li><li>Item 3:2</li><li>Item 3:3</li></ul><li><ul id="word-by-word-fields"><li>Item 4:1</li><li>Item 4:2</li><li>Item 4:3</li></ul><li><ul id="word-by-word-fields"><li >Item 5:1</li><li>Item 5:2</li><li>Item 5:3</li></ul><li><ul id="word-by-word-fields"><li>Item 6:1</li><li>Item 6:2</li><li>Item 6:3</li></ul><li><ul id="word-by-word-fields"><li>Item 7:1</li><li>Item 7:2</li><li>Item 7:3</li></ul></ul>

Open in new window

HTMLPHP

Avatar of undefined
Last Comment
SAbboushi

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
LZ1

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SAbboushi

ASKER
Thanks - I used PHP to insert </ul><ul> in the right spots.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes