How do I indent to the right an li in Bootstrap 4? I have this code but the circle bullet of the li is one character to the left of the <h6>. I got position static.
<h6>Test1</h6>
<li>Test2</li>
put your li elements inside a ul tag.
<h6>Test1</h6>
<ul>
<li>Test2</li>
</ul>
It does not make any sense to locate an <li> element right after an <h> tag. <li> elements are supposed to only be located in a list element such as <ol> or <ul>.
If you want to have a bold text just left to a <ul> list, you need to locate it in another block element (<div> for example), which with proper CSS you can locate just left to the <ul> list.
Related
please see html validator error output in screenshot.
ul{
display: inline;
}
<ul>hi
<li>
1234
</li>
<li>
5678
</li>
</ul>
<ul>hello
<li>
abcdef
</li>
<li>
ghijkl
</li>
</ul>
question:the ul items(hi,hello) in above css code moved a couple of places to the right if I used the css display:inline tag . But They do not get moved if I execute with a css ul tag having no display:inline value..please explain. and second question why have the circle markers disappeared ?
li elements have a display value equal to list-item and following the specification they generate a block box so you end having a block element inside and inline element.
The above behavior is also defined in the specification and leads to the result you get. More detail: Is it wrong to change a block element to inline with CSS if it contains another block element?
why have the circle markers disappeared ?
It's still there but hidden on the left because the default behavior is list-style-position: outside
ul{
display: inline;
}
li {
margin-left: 20px;
}
<ul>hi
<li>
1234
</li>
<li>
5678
</li>
</ul>
<ul>hello
<li>
abcdef
</li>
<li>
ghijkl
</li>
</ul>
ul gets a default padding-left applied from the user agent stylesheet, 40px or something.
With an inline element, padding-left works only before the first line of content, and padding-right only after the last line.
Make it inline-block instead, if you want that padding applied to the whole element.
Because the inline value of the display property is something that makes the elements inside to behaves inline.
That means you have not much options to position and move them.
The inline value is most useful for a text paragraphs to wrap theentire paragraph. Where you would like the text to position in a couple of lines one below another.
Weird problem that <ol> list item number isn't aligned with its content. See live page or screenshots: 1, 2
See the line numbers of the ordered list isn't aligned with its content. They are all down below when the screen is wide and up in the air when the screen is narrow.
Thought it's something wrong with the CSS since both Chrome and Firefox render the list this way, but didn't find any weird styles at all in the stylesheets. Is this normal behavior of HTML5 <ol>? How can I make it the item numbers are aligned to the top line of its corresponding content, both wide and narrow screen?
This is because you have applied display:inline-block to the <a> tags. Just apply display:block to the <a> tags
Stack Snippet
a {
display: block;
margin-bottom: 10px;
}
<ol>
<li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
</li>
<li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
</li>
<li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
</li>
<li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
</li>
</ol>
It has to do with the CSS rule for .links-4 a. It sets display: inline-block;. If you change it to display: inline, it'll be fine.
I am using the latest version of Bootstrap for the styling of most of my HTML elements.
On one of my pages I need to dynamically add list items to my <ul></ul> element. I am adding these additional list items with jQuery. This is how I do it:
$('ul.test-items').append('<li class="available">Test Item</li><li class="available">Test Item</li>');');
After a new list item is added to the ul element it seems to lose the styling just for that <li></li> item, the already added list items display correctly. The list items have padding on either side of them, but when added they seems to be added next to each other, with no padding. Do I need to redraw the ul element after adding new list items to it so that it can be styled as part of the ul element?
It seems to work well for adding 1 list item element, but 2 or more you can see the difference.
This is my current HTML markup:
<ul class="list-inline test-items">
<li class="available">product colour 1</li>
<li class="available">product colour 3</li>
</ul>
After adding the new list items via jQuery it looks like this:
<ul class="list-inline test-items">
<li class="available">product colour 1</li>
<li class="available">product colour 3</li>
<li class="available">Test Item</li>
<li class="available">Test Item</li>
</ul>
When I view the markup by pressing F12 in Chrome it looks right, it's just not displaying right. My guess is it is not part of the already styled ul element.
Here is my style:
.test-items .available
{
border: 2px solid #999;
}
The list items have padding on either side of them, but when added they seems to be added next to each other, with no padding
Padding is inside the element – and the newly added elements have that padding inside of their borders as well. That is not the issue.
The spacing between the elements, that comes only from the whitespace between the element’s tags – because the li are displayed inline.
If that’s what you are after here – then you simply have to add that whitespace between the newly added elements yourself:
.append('<li class="available">Test Item</li> <li class="available">Test Item 2</li>');
https://jsfiddle.net/0s7n3907/4/
W3 says:
An li element’s end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.
But this:
<ol>
<li>one
<li>two
<li>three
<ol>
<li>three.one
<li>three.two
</ol>
<li>four
</ol>
Appears to render fine.
I don't know if four's li is considered to "immediately follow" three's li or not because there's an ol inbetween. The spec isn't really clear -- technically the text "one" represents a TextNode so two's li doesn't really immediately follow either.
Is there actually any scenario where a closing </li> is necessary?
I've only got Chrome and Firefox installed, but they both render the above how I would expect.
As far as I'm aware, the only legal direct children of ul and ol are li so there can't be any ambiguity, right?
So, what W3C is saying is
An li element’s end tag is mandatory if the li element is immediately followed by something else than another li element or if there is more content in the parent element.
How is this possible? li Elements can only occur within ols, uls and menus.
But ols und uls allow only lis as their children.
What about menu? It allows flow content too. So there you have it:
<menu>
<li>foo</li> <!-- mandatory -->
bar
</menu>
<menu>
<li>foo</li> <!-- mandatory -->
Hello, I am text content!
</menu>
When you see the examples it is pretty obvious that omitting the end tag would give the parser no chance to determine where the li ends.
Edit: as #BoltClock points out below, script and template elements are now allowed too:
<ul> <!-- or ol or menu -->
<li>foo</li> <!-- mandatory -->
<script></script>
</ul>
Closing </li> is not optional when the LI it closes is followed by any element other than LI.
I want to add space before bullet points . My requirement like
This is paragraph1
The text line one
The text line two
This is paragraph 2
The text line one
The text line two
Any help will be appreciated.
Try setting margin to li
li{
margin-left: 20px;
}
JSfiddle here
There is spacing before bullet points by default. If there isn’t, you are probably using a “Reset CSS” of some kind.
To set the spacing to a desired value, set padding-left and margin-left of both ul and li elements to zero and then set one of them to the desired value.
CSS:
li {
margin-left:1em;
}
You can set CSS to li as per your requirement.
HTML Code
<p>This is my paragraph1</p>
<ul><li> List One </li>
<li> List Two </li>
<li> List Three </li>
</ul>
<p>This is my paragraph 2</p>
<ul><li> List One </li>
<li> List Two </li>
<li> List Three </li>
</ul>
CSS
li {
margin-left:1em;
}
JSFiddel
apply margin-left to ul
Working Fiddle example is here:
Code:
[http://jsfiddle.net/Sharan_thethy/MNaUn/][1]
I hope this will help you