This question already has answers here:
Why is my background color not showing if I have display: inline?
(6 answers)
Inline container isn't showing background color when wrapping elements [duplicate]
(1 answer)
Closed 1 year ago.
In this little example I have attached I expected the yellow background to extend to the li tags that are children of the ul but this seems not to be how it behaves when display:inline is applied to the ul tag.
What's the logic behind this behaviour?
P.D. I know how to fix this issue. I could make the ul tag an inline block, but this is not what this question is about. I exactly thought that the below code would have behavef as if display-block was applied. In the end, you have a tag surrounding a content. display:inline makes it show in the same line but shouldn't it big as big as its content?
.li {
background-color:red;
}
.inline-ul {
display:inline;
background-color:yellow;
}
.inline-li {
/*display:inline;
background-color:green;*/
}
<html>
<head>
</head>
<body>
<nav>
<ul class="mainMenu">
<li>Item1</li>
<li class="li">
<span>Item2</span>
<span>Item3</span>
<ul class="inline-ul">
<li class="inline-li">Item11</li>
<li>Item12</li>
<li>Item13</li>
</ul>
</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</nav>
</body>
</html>
Related
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 2 years ago.
In my application I have the following code
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search for something..." data-inset="true">
</ul>
<span class="material-icons"> filter_alt </span>
These 2 elements are currently on 2 sperate rows. How can I make them in the same horizontal row?
<ul> is a block level element. Means it will be displayed below other elements and the following element will be displayed below the unordered list. If you change the ul to an inline-block element, it will go inline with other inline elements such as a link a.
ul {
display: inline-block;
list-style: none;
}
<ul>
<li>List Item</li>
</ul>
Link
This question already has answers here:
I need an unordered list without any bullets
(16 answers)
Closed 6 years ago.
Im working on a project and im using some ul and li's.
But i cant seem to figure out how to remove those pesky black dots that come with those lists.
Can any of you help me with this?
Edit: i completely forgot to search this site if there was already an answer (derp) turns out there was! Marked this as a duplicate, thanks for helping me everyone!
Relatable post
Those black dots you are referencing to are called bullets.
They are pretty simple to remove, just add this line to your css:
ul {
list-style-type: none;
}
There you go, this is what I used to fix your problem:
CSS CODE
nav ul { list-style-type: none; }
HTML CODE
<nav>
<ul>
<li>Milk
<ul>
<li>Goat</li>
<li>Cow</li>
</ul>
</li>
<li>Eggs
<ul>
<li>Free-range</li>
<li>Other</li>
</ul>
</li>
<li>Cheese
<ul>
<li>Smelly</li>
<li>Extra smelly</li>
</ul>
</li>
</ul>
</nav>
CSS :
ul{
list-style-type:none;
}
You can take a look at W3School
This question already has answers here:
Should I use <ul>s and <li>s inside my <nav>s?
(9 answers)
Closed 9 years ago.
today i wanted to have a closer look over the nav element from html5. and i've seen on most websites that the way it should be used is with an ul li inside. Well that wouldn't be very semantic because the nav element already acts like a list. Even on MDN i've seen the example using nav ul li elements. But how about just simple nav with links inside and even dropdown
<nav>
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
<a href="#" id="dropdown-menu">Dropdown
<nav class="dropdown">
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
</nav>
</a>
</nav>
Is it semantic, is it wrong ? if it's correct the way i used why everyone uses ul li elements inside of nav ?
Update: just for the example i've updated the topic and added the css and js
Javascript
$('#dropdown-menu').on("click", function(e) {
$('.dropdown').slideDown(100);
});
CSS
.dropdown {
display: none;
}
I think good practice (required for wordpress for example) is building navigation this way:
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</nav>
Always use ul, it's natural - navigation is a list.
So, I have the following HTML structure:
<div id="category-filter">
<div class="column full">
<ul class="float-clear" id="category-filter">
<li>All Categories</li>
<li>Educator Workshops</li>
<li>Exhibitions</li>
<li>Family Activities</li>
<li>Films</li>
<li>Lectures + Gallery Talks</li>
<li>Music</li>
<li>Other Activities</li>
<li>Tours</li>
<li>Workshops</li>
</ul>
</div>
</div>
Which, after styling produces the following in Firefox:
However, in Webkit, the link text wraps:
The LI tags are floated left and should grow with the size of anchor inside them and then wrap as needed inside the container which has a width set. Any ideas why the links are wrapping in Webkit?
Add white-space:nowrap; to the links to avoid break line.
And <ul> element must only contain <li>.
It's guesswork without seeing your CSS, but try this:
#category-filter a {
white-space: nowrap
}
That should stop the text from wrapping.
And as already mentioned, it's invalid to have a div as a direct child of a ul. You should change it to <li class="column full">. You might also have to adjust some of the selectors in your CSS.
I have a css sprite navigation bar where the li's are wrapped in a href tags for linking...
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
It works fine for me in Safari, Chrome, Opera & IE - but the links aren't active in Firefox, and when I look at the code in Firebug, Firefox renders the a href and li tags as separate lines:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
Any tips? Thanks!
li elements are the only elements that can be children of ol or ul. Your HTML is invalid at the moment.
Please wrap the lis around the as.
You'll want to style up the a inside the li making it's width and height 100%, here's some other suggestions:
http://doctype.com/make-li-clickable-target-url
Why not just put the anchor tags inside the LI elements? That's how it's usually done.
<ul> doesn't support <a> as a child, your html is not properly formatted, try this instead:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
You need to put a's inside li's, and then display: block; in your CSS, this will make the whole li a link instead of just the text, which I think is what you're probably trying to achieve?
That way you then add padding etc to your <a> tag to make the link blocks bigger. This will solve the FF issue:
CSS:
#header ul li a {
display: block;
padding: 10px;
}
HTML:
<div id="header">
<ul>
<li id="supplements-link">Supps link</li>
<li id="tutorials-link">Tuts link</li>
<li id="blog-link">Blog link</li>
</ul>
</div>