How to accomplish this:
1. lorem ipsum
2. lorem ipsum
2a. lorem ipsum
3. lorem ipsum
4a. lorem ipsum
html: (I cannot expose the text so I'm using lorem)
<ol>
<li>lorem ipsum 1</li> <--- 1
<li>lorem ipsum 2 </li> <--- 2
<li class="number-alpha">lorem ipsum 2a</li> <--- 2a
<li>lorem ipsum 3</li> <--- 3
<li class="number-alpha">lorem ipsum 4a</li> <--- 2a
</ol>
as you can see the 2a is a different situation then the 4a, but I need to solve both situations in one ordered list and use CSS instead of JS or Jquery. The reason why you have 2 and 2a is because 2a is an exceptional message of 2 for a different user. the reason why its 4a instead of 3a is because 4a isn't an exceptional message but its information for a different user (it needs to be shown in the same list)
this is what I came with (pretty proud of this one I gotta admit) :
ul {
counter-reset:yourCounter;
}
ul li {
list-style:none;
}
ul li:not(.sub) {
counter-increment:yourCounter;
}
ul li:before {
content:counter(yourCounter) ". ";
}
ul li.sub:before, ul li.subskip:before {
content:counter(yourCounter) "a. ";
}
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li class="sub">lorem ipsum</li>
<li>lorem ipsum</li>
<li class="subskip">lorem ipsum</li>
</ul>
Related
I want to align the right li to the left li. is there a css technique that i can use for this one? like using ids to align it? im stuck pls help
Not sure if this is what you are trying to do... need to see your code anyways, if you hard code info then you can use pseudo elements to align them correctly
<body>
<ul>
<div>
<li>Lorem Ipsum is simply dummy text of the printing</li>
<li>DATE 1 </li>
</div>
<div>
<li>Lorem Ipsum is simply dummy text of the printing</li>
<li>DATE 2</li>
</div>
<div>
<li>Lorem Ipsum is simply dummy text of the printing</li>
<li>DATE 3</li>
</div>
</ul>
</body>
div {
display: flex;
}
li {
margin: 0 20px;
width: 25%
}
I have this HTML/CSS table of contents based on Creating table of contents in html. But how do I fix the automatic numbering so it resets properly after nested lists?
Current result:
1 Lorem
2 Ipsum
2.1 Dolor
2.2 Sit
2.2.1 Amet
2.2.2 Consectetur
2.3 Adipiscing
Desired result:
1 Lorem
2 Ipsum
2.1 Dolor
2.2 Sit
2.2.1 Amet
2.2.2 Consectetur
3 Adipiscing
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".")" ";
counter-increment: item
}
<ol>
<li>Lorem</li>
<li>Ipsum</li>
<ol>
<li>Dolor</li>
<li>Sit</li>
<ol>
<li>Amet</li>
<li>Consectetur</li>
</ol>
</ol>
<li>Adipiscing</li>
</ol>
Just take care of your markup (only lis inside ols) - a sub-list can be something like this:
<li>Sit
<ol>
<li>Amet</li>
<li>Consectetur</li>
</ol>
</li>
See demo below:
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".")" ";
counter-increment: item;
}
<ol>
<li>Lorem</li>
<li>Ipsum
<ol>
<li>Dolor</li>
<li>Sit
<ol>
<li>Amet</li>
<li>Consectetur</li>
</ol>
</li>
</ol>
</li>
<li>Adipiscing</li>
</ol>
I'm trying to fill an unordered vertical list that continues on the next line every time the list reaches the length limit. But instead of simply displaying the next list item on the next line I want the list item to break and continue like this:
I don't want to do this with columns, rather that it breaks dynamically.
Maybe something like this to make the list horizontal and to create your own custom list-style-type?
Code:
<style>
ul {
list-style-type: none;
text-align: center;
width: 450px;
}
li {
display: inline;
}
li:before {
content: "\2022";
margin-right: 2px;
}
</style>
<ul>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
</ul>
How about giving your <ul> a set max-width, then give your <li> display: inline; so they aren't block elements anymore and wrap like you want. However list-style-type will not work on the li's anymore because they are inline elements. You can still get your red bullet points working with background images, looks like you might be already doing this.
ul {
max-width: 220px;
list-style-type: disc;
}
ul li {
display: inline;
}
<ul>
<li>Hey there this is a pretty long sentence</li>
<li>Hey there this is a pretty long sentence</li>
<li>Hey there this is a pretty long sentence</li>
<li>Hey there this is a pretty long sentence</li>
</ul>
You can use css to change the way of items are listed.
Ex:
ul {
width: 250px;
display: inline-block;
}
li {
float: left;
margin-left: 20px;
}
<html>
<body>
<ul>
<li>item 1</li>
<li>item 1 item 2</li>
<li>item 1 item 2 item 3</li>
<li>item n</li>
</ul>
</body>
</html>
I have a content string that starts with an unordered list I want to make a summary of this content on my homepage and I need to match the first unordered list and only show 5 list items in the preview, so I stated with matching the whole ul tag using this regex:
/<\s*ul[^>]*>(.*?)<\s*/\s*ul>/s
it works fine in regex tester online but I get Unknown modifier '\' and I don't know which one ? also after getting the whole unordered list how can I choose only the first 5 list items for example:
<ul class="mylist">
<li>Lorem Ipsum Dolor Sit Amet</li>
<li>Lorem Ipsum Dolor Sit Amet</li>
<li>Lorem Ipsum Dolor Sit Amet</li>
<li>Lorem Ipsum Dolor Sit Amet</li>
<li>Lorem Ipsum Dolor Sit Amet</li>
<li>Lorem Ipsum Dolor Sit Amet</li>
<li>Lorem Ipsum Dolor Sit Amet</li>
<li>Lorem Ipsum Dolor Sit Amet</li>
<li>Lorem Ipsum Dolor Sit Amet</li>
<li>Lorem Ipsum Dolor Sit Amet</li>
</ul>
and I want to create the same one with only the first 5 <li> tags, so should I use regex or some other methods in php ?
and thanks in advance.
/<\s*ul[^>]*>(.*?)<\s*/\s*ul>/s
you need to escape the / if you use it as the delimiter.
/<\s*ul[^>]*>(.*?)<\s*\/\s*ul>/s
in PHP you can use any character as the delimiter, though:
#<\s*ul[^>]*>(.*?)<\s*/\s*ul>#s
You can repeat a pattern:
#<\s*ul[^>]*>(\s*<li>.+?</li>){5}#sm
will match 5 <li>s. You won't be able to access them seperately, though. You can either unroll that repeated-group, or run a second expression to extract the <li>s.
I have to build a page that has a list that fits in two columns. This list is generated by PHP so needs to be easy to add inputs.
It should like to:
* Lorem Ipsum * Lorem Ipsum
* Lorem Ipsum * Lorem Ipsum
* Lorem Ipsum * Lorem Ipsum
* Lorem Ipsum * Lorem Ipsum
* Lorem Ipsum * Lorem Ipsum
I would like to know if there is some way to generate this with a basic structure of <ul /> and <li />:
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
I need to support major browsers (and IE7, 6 not supported).
Thank you in advance!
I have found the solution to this:
ul li {
margin: 0;
padding: 0;
width: 50%;
float: left;
}
As explained here, a simple way to do that is to give an explicit width to the list and its items and have the items float to the left:
ul {
width: 700px;
}
li {
width: 200px;
float: left;
}
You're looking for the CSS3 multicolumn property. Unfortunately, unlike a lot of the cool features that are provided in the CSS3 specs, hardly any browser supports this as of yet. There is a javascript available though that can make it work in most browsers:
http://www.alistapart.com/articles/css3multicolumn/