I have been trying to learn horizontal lists in html. I have the following code,
CSS:
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
}
</style>
HTML:
<div >
<ul id="list">
<li>Store </li>
<li>Mac </li>
<li>IPod </li>
<li>IPhone </li>
<li>IPad </li>
<li>ITunes </li>
<li>Support </li>
</ul>
</div>
When I put the id in the div tag (<div id="list">)then it does not show the list horizontally while the current code displays the list horizontally. I don't get the reason behind it. Please help me clear the concept. Thanks
Because a div is not a list element. It has no list-style-type, so it won't change the bullets on any lists within the div. And an 'inline' display type does not propagate down the DOM tree from a parent node, so the inline applies only to the div itself and won't affect the list or li elements.
It works just fine if you put the ID on the div element as well.
Have a look at this fiddle: http://jsfiddle.net/sKaYm/
Your CSS selector #list li says "apply this to any list element that is child of an element with ID 'list' - no matter if it is an immediate child or not." - So basically it doesn't matter how many levels of div's or other elements you wrap around your list, it will still select it.
According to this jsFiddle it works.
list-style-type only changes the marker in front of the item.
to create cross browser horizontal list add float left to each list item :
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
float:left;
}
Related
My current issue is that my list at the top of my website is a little too small. I am trying to make the text the size of .
I would so something like this
<li style="color:black;font-size:30px">Example </li>
But my list is an href and this will not work.
<ul>
<li>How Does it Work?</li>
<li>FAQ</li>
<li>Discord Server</li>
</ul>
</div>
So im unsure on what to do, any help would be great.
You need to select that a tag
Use this in css:
ul li > a {
font-size: 30px;
}
this means it will select every a element which is a child of li.
You should use a CSS file whenever possible. You could also use a style tag. But the following in your html file.
<style>
ul li,
ul li a {
color:black;
font-size:30px;
}
</style>
Try <style>li a {color:black;font-size:30px;}</style>.
This targets all <a> elements that are inside a <li> and applies the styles on them.
This will style all the anchor tags inside an unordered list:
ul a{font-size:30px;}
I'm working with Bootstrap. I'm trying to add an image as number icon to my list. It is kind of a bad practice to add <div> tag inside <ul> tag, so is it possible to add icon with ::before?
Here's my code:
<ul class="lizt" id="sub-lizt">
<li class="item">1. Bunch of geebrish</li>
<li class="item">2. Bunch of geebrish</li >
</ul>
ul {
list-style-image: url('/your_img_path.jpg');
}
You can use this in your CSS. For in-depth just take a look Here.
Putting a div inside an li tag is not a bad practice. It would be wrong to put a div directly inside a list ol/ul, but not inside a list item.
That being said, you don't need a div to put a numbered image as bullet for your list, because, in fact, list-style property allows using an image as bullet.
.item {
list-style: url('http://via.placeholder.com/32x32/000/fff?text=1');
}
.item:nth-child(2) {
list-style: url('http://via.placeholder.com/32x32/000/fff?text=2');
}
.item:nth-child(3) {
list-style: url('http://via.placeholder.com/32x32/000/fff?text=3');
}
<ol class="lizt" id="sub-lizt">
<li class="item">Bunch of geebrish</li>
<li class="item">Bunch of geebrish</li >
<li class="item">Bunch of geebrish</li >
</ol>
You'd probably want your images vertically aligned in the middle with your text. In that case, you have many options, like moving up your a elements from its relative position.
.item a {
display: inline-block;
position: relative;
top: -0.75em;
}
I am creating a horizontal list. Here is my html:
<ul class="deals">
<li>test</li>
<li>fads</li>
<li>asdf</li>
</ul>
And here is the css:
ul.deals {
list-style-type: none;
}
ul.deals li {
display: inline;
padding: 10px 20px;
}
If I add a div inside of the list, then it does not show horizontally anymore. Here is the new html:
<ul class="deals">
<li>
<div>test</div>
</li>
<li>
<div>fads</div>
</li>
<li>
<div>asdf</div>
</li>
</ul>
What about the div changes the output? Also, how would I fix this?
As already mentioned, divs are block level elements.
What are you trying to achieve by nesting a div? If you don't need a dimensional container just use a <span> rather than using a <div> styled with display: inline. Reason: spans are inline by nature and won't need additional css to make them so.
If you want a dimensional container while still retaining your horizontal structure you can use either a <span> or <div> as long as you assign display: inline-block
Even better, style the list item itself with display: inline-block. That way you don't need the nested DOM element.
As gillesc said, DIV tags are block level. Try the following dubious code in your css
ul.deals div {display: inline}
You could possibly use inline-block instead
I struggled for this issue for hours, but can't get it work still.
I have the html code like this :
<ul>
<li><div>aa</div><div>aa11</div><li>
<li><div>bb</div><div>bb11</div><li>
</ul>
I wondered how to use css to let the <div> display in one line each li. But the <ul><li> label still have its vertical style.
I am new to CSS, and any help will be thankful.
ul li{
display: table;
}
ul li div{
float: left;
}
This will make the <div> inside the <li> to look side by side.
You might also want to add
list-style-type: none;
in order to get rid of the bullet-points. In addition to what #Viswalinga Surya S said
Doing that, would give you this --> http://jsfiddle.net/A35Fe/
It looks like you forgot to close your <li> tags, you have opening <li> tags but you didn't close them with </li>. If you want to make aa and aa11 side-by-side you also need to add a display: inline-block; style to your divs. Here's a demonstration: http://jsfiddle.net/5wLku/
Here's my solution:
<ul>
<li><div>aa</div><div>aa11</div></li>
<li><div>bb</div><div>bb11</div></li>
</ul>
<li style="float:left"><div>aa</div><div>aa11</div></li>
and end your list items with
</li> not with <li>
I have Updated your code, Here is the JSFiddle link and let me know if you want more change:
http://jsfiddle.net/h5bMa
HTML:
<ul>
<li><div>aa</div><div>aaa1</div></li>
<li><div>bb</div><div>bbb1</div></li>
</ul>
CSS:
ul li{
float: left;
}
I have a nested list with links in it. Unfortunately I cannot change the HTML structure, because the HTML is generated as it is.
HTML
<ul>
<li>
Link Level 1
<ul>
<li>Nested Link</li>
<li>Nested Link</li>
<li>Nested Link</li>
</ul>
</li>
</ul>
Layout
I have to indent the nested lists and I'm doing this with a margin-left on the nested lists like:
ul {
width: 200px;
}
ul li ul {
margin-left: 200px;
}
Issue
The parent li gets resized because of the nested list's height, but the link of the li has the height of one line only. The link is not sized as large as the li / fully clickable.
I'm not able to make the link the size of the parent li and be clickable.
I was thinking of something like:
ul li a {
min-height: 20px;
height: 100%;
display: block; /* or inline-block */
/* z-index has no effect on this */
}
http://imageshack.us/photo/my-images/7/sitemapul.png/
Please review the sample more more details on the code.
Sample
You can find a simple working sample and the not working sample with nested lists here:
http://jsfiddle.net/Dc6wS/3/
Only solution i can think of is with jQuery / javascript.
http://jsfiddle.net/Dc6wS/7/ or http://jsfiddle.net/Dc6wS/8/