I have this HTML:
<div class="nav">
<ul class="nav-dots">
<li class='ni n1'><a href="" class='nia'>dot</a></li>
<li class='ni n2'><a href="" class='nia'>dot</a></li>
<li class='ni n3'><a href="" class='nia'>dot</a></li>
</ul>
</div>
With this CSS:
.nav-dots {
display: inline-block;
}
As you can see, the <li> elements should display inline, but, they don't, and I have no idea why. How can I fix this?
I made a jsfiddle
.nav-dots is a class added to the parent ul. You need to call display: inline; on the lis themselves
li {
display: inline;
list-style-type:none;
}
FIDDLE
It should be
.nav-dots li {
display: inline-block;
}
or
.ni {
display: inline-block;
}
Your CSS is applying the inline-block display property to the ul, not the li children
also
.ni{display:inline}
will work
display is not a property that is inherited. In order to keep the same structure you have and make the list items inline, you have to explicitly set their display property to inherit:
li {
list-style-type:none;
display:inherit;
}
Here's a jsFiddle
Related
Can someone please explain to me, why li and ul does not expand in plunkr bellow?
I know many has been written about that, but all I found is playing with overflow, height, position and display css properties. I do not use any of that.
a {
padding: 1em;
background-color: red;
}
ul {
list-style: none;
background-color: yellow;
display: flex;
}
li {
background-color: green;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<ul>
<li>
google
</li>
<li>
test item
</li>
</ul>
</body>
</html>
Can someone please explain to me, why li and ul does not expand
Because your links are still inline, and therefor their padding flows out of the line box.
Add display: block for the links.
By default a is inline element, so it don't include padding in height, just update it to block label element. then ul and li will expend.
for updating it to block label you can add display:block or display: inline-block or float: left.
Just add display:block in anchor tag
ul {
list-style: none;
background-color: yellow;
display: flex;
margin:0px;
padding:0px;
}
ul li {
background-color: green;
display: inline-block;
}
ul li a {
padding: 1em;
background-color: red;
display:block;
}
<ul>
<li>
google
</li>
<li>
test item
</li>
</ul>
Set display:block in a because a is an inline level element so make it block level
Also don't need display:inline-block in li because you have display:flex in ul
You can also remove default padding from ul
a {
padding: 1em;
background-color: red;
display: block
}
ul {
list-style: none;
padding:0;
background-color: yellow;
display: flex;
}
<ul>
<li>
google
</li>
<li>
test item
</li>
</ul>
I am trying to display the list on button hover, but what happens is, whenever I hover near the button area, text gets displayed.
.header_nav {
width: 800px;
height: 400px;
}
.header_nav ul {
list-style: none;
}
.header_nav ul ul {
display: none;
}
.header_nav ul ul #nav_button:hover>ul {
display: block;
}
.header_nav ul ul li >ul {
display: none;
}
.header_nav ul li:hover >ul {
display: block;
}
<nav class="header_nav">
<ul>
<li>
<input type="button" value="Button 1" name="nav_button" id="nav_button">
<ul>
<li>Locations</li>
<li>
Mumbai
<ul>
<li>Txt 1</li>
<li>Txt 2s</li>
<li>Txt 3</li>
</ul>
</li>
<li>Delhi</li>
<li>Banglore</li>
<li>Nagpur</li>
</ul>
</li>
</ul>
</nav>
JS FIDDLE : https://jsfiddle.net/fhv7drst/
It is because your li element was block element.
I changed it to inline and it started working as per your requirements
HTML:
<li class="parentElement">
<input type="button" value="Button 1" name="nav_button" id="nav_button">
CSS:
li.parentElement{
display: inline;
}
here is the working fiddle
https://jsfiddle.net/m73p8pea/
The reason is that your li element is a block element, which means that it will automatically try to span the entire width available. In your case, this is the 800px provided by the topmost element.
You have two solutions readily available - one is to make the list element an inline-block element (or simply an inline element, though I'd prefer inline-block here, as block is how it started) to prevent it spaning the whole width:
.header_nav ul li {
display: inline-block;
}
You could also trigger the display change on the unordered list when hovering over the button directly, not when hovering over it's parent list item:
.header_nav #nav_button:hover + ul {
display: block;
}
This is likely the better solution, as it doesn't mess with the display types more than you need to, and you more accurately describing what you want to happen - show the list when the button is hovered.
As pointed by #Rahul Arora indeed it is because of li as block element.
But if for some reason you still want to keep it as block element, you can keep it by making it as inline-block. I also recommend removing margin (see your given example by inspect element, it is to the write of ul) and padding which is assigned by browser as default.
Here is the code:
.header_nav
{
width:800px;
height:400px;
}
.header_nav ul
{
list-style:none;
//displaying ul & all its child as inline block until overriden by other rules
display:inline-block;
//removing default margin and padding
margin:0;
padding:0;
}
.header_nav ul ul
{
display:none;
}
.header_nav ul ul #nav_button:hover>ul
{
display:block;
}
.header_nav ul ul li >ul
{
display:none;
}
.header_nav ul li:hover >ul
{
display:block;
}
<nav class="header_nav">
<ul>
<li>
<input type="button" value="Button 1" name="nav_button" id="nav_button">
<ul>
<li>Locations</li>
<li>
Mumbai
<ul>
<li>Txt 1</li>
<li>Txt 2s</li>
<li>Txt 3</li>
</ul>
</li>
<li>Delhi</li>
<li>Banglore</li>
<li>Nagpur</li>
</ul>
</li>
</ul>
</nav>
I need to change style if i hover on media-body checkbox should show up
.media-body ul:hover input[type="checkbox"] {
display: block;
}
HTML:
<div class="media-body">
<ul>
<li><a style="float:left;">{{inventory.manufacturer}} {{inventory.model}}</a>
<li><input style="float:right; display: none;" type="checkbox" ng-model="inventory.checked" ng-checked="inventory.checked"></li><br/>
</ul>
</div>
Inline CSS has higher priority then outline, so you're changes are applied but are still overridden by your inline styles.
The simplest trick to make it work could be to set !important to your css.
.media-body ul:hover input[type="checkbox"] {
display: block !important;
}
JSFiddle: http://jsfiddle.net/WgQT5/
Anyway the right way would be to put inline styles outside of HTML.
Moreover your HTML is not valid. It should be
<div class="media-body">
<ul>
<li><a style="float:left;">{{inventory.manufacturer}} {{inventory.model}}</a></li> <!-- </li> missing -->
<li><input style="float:right; display: none;" type="checkbox" ng-model="inventory.checked" ng-checked="inventory.checked"/></li><!-- <br/> is invalid here and slash at the and of input was missing-->
</ul>
</div>
Your problem is that the inline style float: right; display: none; has higher priority than the style defined in CSS.
I would suggest to add a default style in CSS equivalent to the inline one and then override this one:
CSS:
.media-body ul input[type="checkbox"] {
float: right;
display: none;
}
.media-body ul:hover input[type="checkbox"] {
display: block;
}
HTML:
<div class="media-body">
<ul>
<li><a style="float:left;">{{inventory.manufacturer}} {{inventory.model}}</a></li>
<li><input type="checkbox" ng-model="inventory.checked" ng-checked="inventory.checked"></li>
</ul>
</div>
Only add !important and greater than selector
.media-body ul:hover > li input[type="checkbox"] {
display: block !important;
}
LIve code
I'm trying to show a nested (sub) list, but hide the parent ULs and LIs through an "active" class so that the sub list looks like the parent list.
The list with the "active" class isn't visible because it inherits display: none from its parent.
Code:
<ul>
<li>
Hidden
<ul>
<li class="active">Visible</li>
</ul>
</li>
</ul>
CSS:
li {
display: none;
}
li.active {
display: block;
}
Fiddle: http://jsfiddle.net/2C8qs
Any ideas?
If you can add span around the hidden text (http://jsfiddle.net/vittore/2C8qs/3/) :
<ul>
<li>
<span>Hidden</span>
<ul>
<li class="active">Visible</li>
</ul>
</li>
</ul>
li span, li li {
display: none;
}
li li.active {
display: block;
}
display: none hides the element and all of its children, that is final and adding display: block to a child won't make it visible again.
This will hide all children, except for the .active element:
ul.parent > li {
display: none;
}
ul.parent > li.active {
display: block;
}
EDIT: Oops, I misread the question. You can do something similar to the above though, if you wrap the other contents in an element.
An ugly CSS trick : http://jsfiddle.net/2C8qs/4/
Instead of using display none/block, I used text-indent, like that :
li {
text-indent: -99999em
}
li.active {
text-indent: 0
}
Note that can only work on inline / text elements.
I know this is very late to this question, but I've found what I would consider a nice solution and thought I'd post it here for whoever might need it in the future.
First of all, wrap all the <li>'s children with <p> (or <div> or anything, it doesn't matter really), but not any sub-<ul>'s. Then, to the child <ul> you want to be visible, add a class called showing. Example (we only want to show the SubSubThing list):
<ul>
<li>
<p>Item</p>
<ul>
<li>
<p>SubItem</p>
<ul>
<li>
<p>SubSubItem</p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Thing</p>
<ul>
<li>
<p>SubThing</p>
<ul class="showing">
<li>
<p>SubSubThing1</p>
</li>
<li>
<p>SubSubThing2</p>
</li>
<li>
<p>SubSubThing3</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Then apply this CSS:
ul>li {
list-style:none;
}
ul>li>p {
display: none;
}
ul.showing>li>p {
display:block;
}
/* Without removing padding and margin,
the sublists appear way over to the right */
ul {
margin-left: 0px;
padding-left: 0px;
}
li {
margin-left: 0px;
padding-left: 0px;
}
Now, only the <li>'s who are direct descendants of ul's with a showing class will display at all. The other items in the list will use no space.
To get the sublists to show bullet points would be easy via CSS, and to show different sublists it is simple to just use jQuery to set showing on the appropriate ul.
Hope that helps.
Obligatory JSFiddle
So the reason you can't simply hide the first li and reveal the second is because the second is contained by the first — you can't reveal and element that is contained by a hidden one.
Therefore, if you put the li element within a span that you'd like to hide, it becomes easy. I've created a class-free version for you here: http://jsfiddle.net/rgpnr6mh/3/
<ul>
<li><span>Hidden</span>
<ul>
<li>Visible</li>
</ul>
</li>
</ul>
I'm assuming you don't want to display the bullets:
ul {
list-style-type:none
}
li span{
display: none;
}
li li {
display: block;
}
I have a a breadcrumb in my subheader however the active breadcrumb appears underneath the list. I would like it so that they are both in the same line.
HTML:
<div id="breadcrumb">
<ul>
<li>Home ></li>
<li class="active">Marketing Items</li> </ul> </div>
CSS:
#breadcrumb {
font-size:11px;
background-color:#F2F2F2;
}
#breadcrumb ul {
margin:0px;
margin-bottom:0px;
margin-left:4px;
list-style: none;
background-color:#F2F2F2;
}
#breadcrumb .active {
color:#B3B3B3;
}
Here is also the jsfiddle: http://jsfiddle.net/4nRPY/
Use float:left or display: inline-block. But, with float left you have to clear the element right after that.
#breadcrumb ul li{
float: left;
}
Use display: inline-block; on your <li> tags
#breadcrumb ul li {
display: inline-block;
}
DEMO: http://jsfiddle.net/4nRPY/2/
You can this way to chive to that
li{float:left;}
Demo http://jsfiddle.net/4nRPY/3/
I prefer a pseudo element:
JSFiddle
HTML
<div id="breadcrumb">
<ul>
<li>Home</li>
<li class="active">Marketing Items</li>
</ul>
</div>
CSS
#breadcrumb ul li:after {
content:">";
padding:0 0.5em;
}
#breadcrumb ul li:last-child:after {
content:"";
padding:0;
}
Slighty less browser support but no extraneous HTML mark-up and you can change it throughout your site by changing one CSS property.