How to turn off CSS link in HTML?
I have this in my styles.css page
li {
display: inline;
padding: 80px;
}
This makes:
<li>Home</li>
Appear horizontal.
However when I want to use an ordered list in HTML, the numbers will not appear.
I think because the CSS applies to all <li> tags.
You could try ul li to only inline items in an unordered list.
ul li {
display: inline;
padding: 80px;
}
Or better, use a class to designate lists that should display inline:
.inline-list li {
display: inline;
padding: 80px;
}
<ul class="inline-list">
<li>Home</li>
...
Ordered list has the ol tag, the ul tag is an unordered list
In your css, change the ul to ol and you will be able to css an ordered list
If you want the number to appear then you have to add ol tag.
<ol>
<li>Home</li>
<li>About</li>
</ol>
Then, if you want them to be inline, you can do
li {
padding: 80px;
}
ol {
display: flex;
}
Example:
https://jsfiddle.net/sngzv67o/
You can do it by:
a:link {
text-decoration: none;
}
w3school
At least thre exists 2 possibilities;
the first (but i guess no the one you seeked) is to specifiy the path for style, if you can something like will satisfy your need
ul > li {
display: inline;
padding: 80px;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ol>
<li>1</li>
<li>3</li>
<li>4</li>
</ol>
this way, the inlining will only apply to unordered list items.
Another solution is to use vanilla js to explictly remove the style
ul > li {
display: inline;
padding: 80px;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ol>
<li>1</li>
<li>3</li>
<li>4</li>
</ol>
<input type='button' onclick='document.getElementsByTagName("style")[0].remove()' value='Remove style tag'>
Related
How to set background-color for entire list item (including bullets)
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
.li:hover {
background-color: red;
}
but this way it doesn't change background color under bullets
You just add list-style-position: inside; to the ul
ul {
list-style-position: inside;
}
li {
padding: .5rem
}
li:hover {
background-color: red
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
the reason why it breaks everything after adding multiple <p> tags and <spans> is because the <p> tags are the block elements, hence their default behavior is to take a complete line or start from the new line. If you want to add multiple <p> tags inside a single<li> tag then you should specify <p> tag as inline-block while <spans> are inline elements by default.
look the HTML in which i have entered 1 <p> and <span> tag in each <li>
<ul>
<li>
<p>this is nested paragraph inside li</p>
<span>hellooo</span>
</li>
<li>
<p>this is my second nested paragraph</p>
<span>hellooooo</span>
</li>
<li>
<p>this is third nested paragraph</p>
<span>Hellooooooooooooo</span>
</li>
</ul>
right now its breaks everything but when I will specify <p> tag as inline-block, everything will look fine.
ul {
list-style-position: inside
}
li{
background-color: gray;
color: white
}
li:hover {
background-color: red;
}
p{
display: inline-block
}
for styling the list including bullets, there's a property called list-style-position, which defines whether the bullets will be considered as inside the list item or out the list item.
Your HTML will look like
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
and css will be
ul {
list-style-position: inside
}
li{
background-color: gray;
color: white
}
li:hover {
background-color: red;
}
remember that <li> is a type selector so there's no need to use (.li) in CSS file.
for a live demo, check out my codepen
The questions below pertain to sample HTML / CSS code below:
ul {
display: inline-block;
list-style: none;
}
li {
color: #000;
}
<ul>
<li>Home</li>
<li>Portfolio</li>
</ul>
When choosing to format and style a navigation menu that was created using an unordered list, what is the difference of using ul selector to target the lists versus targeting the li selector directly?
Is there an appropriate time when I should only use ul selector instead of li, and vice versa? In other words, are there properties that only work on the ul level. And on the li level?
First of all, there are things you simply cannot do selecting ul (I mean with pure CSS solutions, omitting preprocessors):
li { color: blue; }
li:first-child, li:last-child { color: red }
and so on with :pseudo-classes.
Main point in selecting whole container and targeting nested elements is just much less writing. Compare:
<ul>
<li class="my-superior-class-name"
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
</ul>
with:
<ul class="my-superior-class-name">
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
</ul>
Main difference in targeting ul and li with your CSS styles is that targeting deeper nested elements has bigger priority.
Unorderd list's default styles are:
ul {
list-style-type: disc;
list-style-position: inside;
}
So this are kind of properties which work only on ul lvl. But consider situation, when you set padding on the ul: Does every single ul child gets the same padding? There comes inheritance.
Overall, one advice: just don't overcomplicate it and use what you feel is simplest to understand and come back to for you.
Not every property is inherited implicitly, in fact in OP's code there's proof. The property display:inline-block is applied to <ul> yet the <li> will not inherit the display:inline-block from <ul> unless it does so explicitly by using display:inherit on the <li> (Might as well use display: inline-block on the <li> anyways since both options take the same effort to write.)
There are circumstances in which it would behoove us to target a <ul> over it's <li> such as the properties that are inherited implicitly: font-size, color, visibility etc.
SNIPPET
ul {
display: inline-block;
list-style: none;
}
li {
color: #000;
}
ul:last-of-type {
display: block;
}
ul:last-of-type li {
display: inline-block;
}
<h5><mark><code>ul { display:inline-block; }</code></mark></h5>
<ul>
<li>Home</li>
<li>Portfolio</li>
</ul>
<h5><mark><code>li { display:inline-block; }</code></mark></h5>
<ul>
<li>Home</li>
<li>Portfolio</li>
</ul>
I would like to put a line break into an inline list to produce this result:
However when I put a line break into my basic list, this is the result I get:
How would I make it so that I can put a br within the li element only without, messing up the horizontal list itself.
li {
list-style-type: none;
display: inline;
}
<ul>
<li>Hello</li>
<li>Bonjour</li>
<li>Longer<br>text</li>
<li>Aloha</li>
</ul>
Use display: inline-block; instead:
li {
list-style-type: none;
display: inline-block;
}
<ul>
<li>Hello</li>
<li>Bonjour</li>
<li>Longer<br>text</li>
<li>Aloha</li>
</ul>
Instead of styling the li with
display:inline;
You could achieve the desired effect by
float:left;
Use display: inline-block
Here is working snippet
ul{
list-style:none;
}
ul li{
padding:20px;
display:inline-block;
}
<ul>
<li>Hello</li>
<li>Bonjour</li>
<li>Longer<br>text</li>
<li>Aloha</li>
</ul>
I have following ul and li structure and on hover of anchor tag I want to show ul items as dropdown menu.
What's new
List Item One
List Item One
List Item One
List Item One
List Item One
But I am not able to get any css code.So please help me to write the css code.
I've built the structure for you on jsfiddle. As you specifically asked for the hover event on the anchor link, I have built it up for you as such.
Here's the fiddle: https://jsfiddle.net/mcz4u8pg/1/
And here's the code:
#main {
list-style: none;
margin: 0;
padding: 0;
}
#main > li {
float: left;
padding: 5px 10px;
border: 1px solid red;
margin: 10px;
}
.sub {
display:none;
}
li > a:hover ~ .sub {
display:block
}
.sub {
clear:both;
list-style:none;
margin:0;
padding:0;
}
<ul id="main">
<li>1</li>
<li>2
<ul class="sub">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
.mainmenu li a:hover ul.submenu { display:block;}
I've used a ul in a paragraph tag and used CSS to hide it, but it won't work. How can I fix it?
Here's my HTML content:
<p id="transport">
<img class="draco" src="../image/draco.png"/>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li></li>
</ul>
</p>
And here is my CSS content:
p#transport ul {
background-color: rgba(0,0,0,1.0);
position: absolute;
float: right;
display: none;
}
p#transport:hover ul {
display: block;
}
That is because you cannot put a ul inside a p. The browser interprets it as if you have forgotten to close the p tag and closes it itself. That is the reason the CSS rules do not apply.
Change the p tag to a div and it'll work just fine.
This is because you can't have an ul inside a p tag. Most browsers will change the HTML for you: place the ul outside the p tag. This is what it well may end up looking like:
<p id="transport">
<img class="draco" src="../image/draco.png">
</p>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li></li>
</ul>
<p></p>
Check http://jsfiddle.net/6a0awqgv/embedded/result/. Compare the source code with the element inspector in your console.
So to overcome it you could do:
p#transport + ul {
background-color: rgba(0,0,0,1.0);
position: absolute;
float: right;
display: none;
}
p#transport:hover + ul{
display: block;
}
The + is the adjacent selector