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.
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.
I basically want to keep the nav with all of its contents at the top of the HTML, but have it moved to the bottom of the page with CSS as I am doing mobile-first approach and want the navigation to appear at the top when I resize it to tablet or laptop. I tried using minus with bottom tag but it takes forever to get it to the bottom and does not seem to be the most efficient way to do it. Is the only way to move the context to the bottom of the page is to put it at the bottom of HTML file or is there a completely different way I should approach this?
This is what I have at the moment:
I want to move the underlined links to the bottom, my code:
#topnavigationmenu li {
display: inline-block;
list-style-type: none;
font-size: 3rem;
padding: 10px;
}
<div id="mainpage">
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
The easiest solution: You can create two instances of <nav> and show one on mobile and on desktop using media queries.
Possibly better solution: You can use Flexbox (and even CSS Grid I guess) to change the order, so let's say inside the mainpage div you have two sections the nav and a div with your page content:
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
<div class="page-content">
<!-- Content here -->
</div>
You can add display:flex; to mainpage and manipulate the order these appear on mobile vs desktop/tablet using media queries.
I'd suggest checking these articles out:
Ordering Flex Items
A Complete guide to Flexbox
Is it possible to have each <li> resize its width based upon its content within the same <ul>?
It seems that every <li> is inherently stretched the match the largest width. How can I avoid this?
The <ul> is a vertical list with content varying between pictures and text.
inline-block is good, but presumably you still want the list items to stack without having to restyle them. In that case you can put the content inside a span or div and set that to inline style.
<html>
<body>
<ul>
<li><span>test</span></li>
<li><span>long test</span></li>
<li><span>longest test</span></li>
</ul>
</body>
</html>
with this css
li span
{
background-color:blue;
display:inline-block;
}
http://jsfiddle.net/WHSpW/
If you set "display" style of <li> to inline-block it should work as you want it.
If you float them they will take on the width of the content they contain.
li {float: left;}
You'll want to either float the containing ul or apply a clearfix to keep it from collapsing. Under IE6 you can use zoom:1 to trigger hasLayout on the ul.
HTML List bullet jump to second line when it's line brake.
For expmple:
<ul>
<li>First list</li>
<li>Second list continue to second line.</li>
</ul>
First list
Second list continue to
second line.
How do I make the second list bullet to show up, using CSS?
NOTE: This is only happen when there is not enough space. For example when I view this on my iPhone it's like this. But on my PC looks normal.
If you're okay adding some extra markup, your best bet is to try to utilize the vertical-align property.
<ul>
<li><em></em><span>First list</span></li>
<li><em></em><span>Second list continue to second line.</span></li>
</ul>
CSS:
li em {
height: 100%;
vertical-align: middle;
display: inline-block; }
li span {
vertical-align: middle;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/jB9Ad/
From what I have collected of your Question... You want something along the lines of displaying another "INDENTED" Unordered/Ordered List within that list... Well without using Line Breaks or CSS you could do this...
<ul>
<li>This is an item within the parent List.
<ul>
<li>This is a child list item, and the beginning of a new list.</li>
</ul>
</li>
<li>This is the second item within the parent list</li>
</ul>
That should help! :)
if all you care about is iPhone or WebKit set your li's to overflow:ellipsis; firefox nightlies may support it, but i know ff hasn't had it for a bit.
This question seems to be asked freqeuently over the internet but I still can't find a solution.
I have this navigation bar (It switches between tabs using jQuery) which displays inline. I'm showing a background image on these and to make them more definitive I need to make them wider and higher.
<div id="tabs">
<ul id="tabs-nav-cont">
<li class="tabs-navs">Nav 1</div></li>
<li class="tabs-navs">Nav 2</div></li>
<li class="tabs-navs">Nav 3</div></li>
<li class="tabs-navs">Nav 4</li>
</ul>
</div>
The only way I can seem to do this is by reverting them back to block elements. Which is not what I want because they display vertically. So I tried putting divs in the anchors so I can size them up. However they seem to change them back to block elements too.
Im confused. Someone please help :)
Luckily you live in the year 2009, where inline-block is widely adopted through browsers: Cross browser inline-block.
If it's just for the height (and all the content of the lis fits each on one line), you'd like to go with line-height: 123px, which sets the height of an inline box to 123px (per line, that is).
Or, quite common, if the navigation is left-aligned, float them:
#nav li {
display: block;
float: left;
}
Cheers,
Because it was not 2009 when i first had to solve this :) i got the solution for firefox with following css class:
.ib { display: -moz-inline-block; display: inline-block;}
This is my generic inline-block class that i use where necessary...
Sinan.