Is it possible to display the last <li> at the start of the list without using JavaScript?
For example if I had this code, how would <li>Bob</li> be displayed before <li>James</li> while keeping the structure below the same?
<ul>
<li>James</li>
<li>Chris</li>
<li>Bobby</li>
<li>Bob</li>
</ul>
Note: I cannot use JavaScript!
Assuming you can't manipulate the html (adding id or class attributes for example):
ul{display:flex;flex-wrap: wrap;}/*allows use of the 'order' attribute; allows seperate lines*/
li{width: 100%;}/*puts each list item back on a separate line*/
li:nth-child(1){order:2}/*make the 1st li item the 2nd*/
li:nth-child(2){order:3}
li:nth-child(3){order:4}
li:nth-child(4){order:1}/*make the 4th li item the 1st*/
compatibility: http://caniuse.com/#feat=flexbox
Related
I need to be able to generate an HTML list like
(1) sdkfljsdlkfj
(4) lksdfjlksjdf
(2) lksdjfklsdjf
(7) sdklfjlskdfj
(16) sdklfjhlskdjf
The parentheses aren't necessary, it was just the only way for the Stack Overflow text editor to not auto-format the list. The only thing that matters is that the bullets need to be numbered, but for the numbers to be what I choose and potentially out of order.
I don't even know what to call this type of list concisely, and generally googling about how to do ordered and unordered HMTL lists doesn't give any hints about this.
If you're wondering why I need this, it's because this data comes to my website with Javascript and it's different line items based on a selection request. I'd like to display them in a list, but retain the original values.
Right now, I'm doing an unordered list where the number is in the beginning of the item text, but it doesn't look too great, compared to what I have in mind.
1. sdkfljsdlkfj
4. lksdfjlksjdf
2. lksdjfklsdjf
7. sdklfjlskdfj
16. sdklfjhlskdjf
Does HTML allow this? Something like <li bulletValue=24> ... </li> would be the most convenient.
You would use the value attribute on the li items in the ordered list. See the example below.
<ol>
<li value="1">Item in the list</li>
<li value="3">Item in the list</li>
<li value="6">Item in the list</li>
<li value="9">Item in the list</li>
<li value="67">Item in the list</li>
</ol>
Use CSS along with a data-attribute:
.data-bullet-list {
list-style-type: none;
}
.data-bullet-list li::before {
content: "("attr(data-bullet)") ";
}
<ul class="data-bullet-list">
<li data-bullet="1">Item
<li data-bullet="4">Item
<li data-bullet="2">Item
<li data-bullet="7">Item
<li data-bullet="16">Item
</ul>
Compared to the native value attribute method (which works only for ol, not ul, and your desired result is not ordered), this approach allows for much more customizable styling.
I have a list
<ul>
<li> first article </li>
<li> second article</li>
<ul>
<li> replies to second</li>
<li> different reply to second</li>
</ul>
<li> third article</li>
<ul>
<li> reply to third</li>
<ul>
<li> reply to the reply</li>
</ul>
</ul>
</ul>
Which begets something like
first article
second article
replies to second
different reply to second
third article
reply to third
reply3
reply3
reply to the reply
What i'm trying to achieve is basically make every inner level it's own row:
[first article]
[second article]
[rep2] [difrep2]
[third article]
[reply3] [reply3] [reply3]
[^3reply to the reply]
The problem is: when I put a box around list elements, the box contains the parent and all the descendent/inner elements. I want a box around the list element, and I would like the children to appear on a new "row"
Is there any way to "kick" the inner list elements out of their parent's css box so that they appear on a new "row" ?
https://jsfiddle.net/qjf6tsf8/1/
^Update: please check out this fiddle.
In the fiddle "yet another child" has children elements, and I'd like to put them in a new row below "yet another child" instead of recursively boxing them up.
For reference: https://jsfiddle.net/qjf6tsf8/ (js fiddle showing the tree structure with just li and ul elements, and then the upper link I've changed them to divs)
First off, according to W3C HTML Validator, any <ul> cannot be the direct child of a <ul>.
So this structure
<ul>
<li> first article </li>
<li> second article</li>
<ul>
<li> replies to second</li>
<li> different reply to second</li>
</ul>
...
Should actually be
<ul>
<li> first article </li>
<li> second article
<ul>
<li> replies to second</li>
<li> different reply to second</li>
</ul>
</li>
...
This actually makes your issue less difficult to resolve.
See https://jsfiddle.net/tae2e7ea/.
The important part is below. Use display: block to put the child <ul> on its own line, then display: inline-block for the <li> children.
/* <ul> that are children of <li> should be on their own line */
li > ul {
display: block;
}
/* And the children of those <ul> should be all on one line */
li > ul > li {
display: inline-block;
}
Edit for additional info: See the fiddle for some additional styles you may need to set on the <li> (like vertical-align: center) or <ul> (like padding-left: 0)
Edit after clarifications from asker: Since 100% width is desired and this control is being handled with JavaScript (AngularJS), I recommend organizing by levels in the tree instead of maintaining the tree-like structure you started with. See this Fiddle for that update. JavaScript can then be used to show/hide the necessary levels. Or rather, AngularJS should be used to only render the lists for the "chosen" level.
i think this will work
ul > ul
{
display : inline-flex ;
}
I think you have not decided to display items correctly yet. Because you have think of levels differently in a way that can not be common for all levels. For clarity pay attention to item replies to second. What if it had some children?! You can add a class name like .same-row to every item you want to be displayed in a same row and add fallowing style to your page:
.same-row{
display: inline;
}
How would I go about sanitizing nested lists away once a user submits some HTML markup.
The list is created with execCommand('insertUnorderedList',false,null)
For some reason, firefox will nest lists when this is used on a line within a li while other browsers simply remove the list (Which is what I want).
I would like to remove the nesting to prevent browser inconsistencies with the submitted html.
example:
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
I would like to remove the inner ul to get
<ul>
<li>
</li>
</ul>
EDIT: This is user input I need to sanitize.
$(function(){
$('li ul').remove();
})
I have developed a webpage using the BootStrap framework and have a question about list items in my header.
How can I add a list to a list item?
Here is a link to my website: http://www.canninginc.co.nz/
As part of the header, I have a Products drop down list with an item 'CanLucidDream'. I am wanting to add a list (with list items) to this 'CanLucidDream' item. E.g. Galley, about etc
How can I do this?
EDIT
I did not explain what I am after very well. Basically, I want to have a list of items for the product CanLucidDream to the side of the CanLucidDream item. Like a menu item in a GUI forms application with a little arrow to the right of the menu item that then shows the list.
Is this possible in HTML/CSS?
You can, but a list within a list within a list starts looking really cluttered. If that's what you want, though, than just start a new list after the "CanLucidDream" anchor:
This is what you have:
<ul class="dropdown-menu">
<li>
CanLucidDream
</li>
</ul>
This is what it turns into:
<ul class="dropdown-menu">
<li>
CanLucidDream
<ul>
<li><a>This is the first thing.</a></li>
<li><a>This is the second thing.</a></li>
</ul>
</li>
</ul>
You'll need to style that, of course. Bootstrap might already have some sort of styling built in for drop-downs within drop-downs.
So long story short, for ages, ive been using some CSS reset on my projects.
i was trying to make a regular sitemap page(you know with links in an unordered list) and when i do this (code below)
<div id="smap">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
Products
<ul>
<li>Cantaloupes</li>
<li>Watermelons</li>
<li>HoneyDews</li>
</ul>
</li>
<li>Sales Team</li>
<li>Contact / Directions</li>
<li>Growers</li>
<li>Packers</li>
<li>Shippers</li>
<li>Importers</li>
<li>Distributors</li>
</ul>
</div>
The list comes out but the products sub-items are not indented.
In the CSS reset, the line that's doing this is
vertical-align: baseline;
When i removed it,although it restored the indentation on my sitemap list, it messed up my menus throughout the site.
i want to target that lists specifically so, choosing that lists parent div which is "smap"
What im wondering is, by default, what is a lists vertical alignment value??
like for example, if i do this
#smap ul, li {vertical-alignment: SOMETHING; }
what is the default value for a list to be indented?
Thanks in advanced.
If you want to revert to the default value for any property after a reset, then you should use the value initial - you might want to read this article for more on it.
However, the ul indentation is given by the padding-left of the ul - see http://dabblet.com/gist/3144582. I think vertical-align shouldn't influence that.