Is there a way to display multiple li tags of HTML in a single line as shown below. Basically we need to display the first few li elements in a single line and rest in a list as shown below link. Thanks.
See CSS and positionning possibilities. You've to change regular comportements of li in layout (default one)by setting new rules. i.e.: using float CSS properties but they're many mny ways to set and place elements in the way you like in your page.
When using bootstrap you can even use grid predefine layout fitting what you want(so for example fill each grid cell with one li) but that seems more complex and make you write more i think.
Yes it is possible.
I created an example pen for you.
HTML
<ul>
<li>
<div>
<span>Item1</span>
<span>Item2</span>
<span>Item3</span>
<div>
</li>
<li>item 4</li>
</ul>
CSS
ul{
list-style-type:none;
display:flex;
justify-content:space-between;
flex-grow:1;
}
ul li{
display: inline-block;
}
Place your image files instead of the span tags. Make sure you add display:inline-block; property to them and give proper widths and heights to the image files.
The magic behind this is flexbox
Related
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 have a css menu i'm working on. I'm trying to get the menu items inline, however, it they always display vertically instead. I've tried putting display:inline-block on all of the elements and it still doesn't want to go inline. Any suggestions? Code here: http://jsfiddle.net/3aShL/
<li>s are block-level items, so just because the <a> is, still means with every <li> you will get a new line.
http://jsfiddle.net/3aShL/1/
display: inline;
On the .nav-collapse_ .nav > li will fix it.
Just add this to css
li
{
display:inline;
}
display:inline; - By default, li elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line
Demo fiddle
I have a html code like this
<ul>
<li>Text</li><br>
<li>Text</li><br>
</ul>
What I want,a line break after each li element, can be accomplished using this code. But the problem is when I go to W3C for html5 validation, it shows the error Element br not allowed as child of element ul in this context.
So I understand that br cannot be used as child element of ul. What I want to know that is there any other way to get the same result as above? If it can be done in css, I am ok with it.
Thanks in advance.
By default, <li> elements are display: list-item which will cause them to generate a block box, so you will get a break after them. Set the display property back to list-item to restore them.
If actually mean that you want a margin, rather than a simple line break, then use the CSS margin property to set one.
You can use the margin-botton in css
ul li {
margin-bottom: 20px; // As per your requirement
}
HTML
<ul>
<li class="one">Text</li>
<li class="one">Text</li>
</ul>
CSS
<style>
.one
{
line-height: 40px;
}
</style>
I have a bunch of unordered list elements that are stacked side by side with each other. To accomplish this, the style rule typically applied is:
#slide ul,li{
float:left;
list-style-type:none;
}
I need to introduce another unordered list of elements that behave the way the ul and li element typically do; that is stacked on top of each other but without any list-style-type, and to achieve this:
.stack ul,li{
list-style-type:none
}
The problem is that the styles of stack class for ul,li do not apply and the elements stack next to each other as they are being in the case of ul,li for #slide.
Check it out on this js fiddle:
http://jsfiddle.net/G7JHK/
Are my selectors wrong?
P.S: I have tried this out with class/id and various combination of both but the result is always the same.
Because of the comma in your selector you were applying float left to all li elements. Try something like this:
<ul class="stack">
<li>element 1</li>
<li>element 2</li>
</ul>
<br/>
<ul id="slide">
<li>element 3</li>
<li>element 4</li>
</ul>
#slide li{
display:inline;
}
This css will make all list elements in the div 'slide' display in a row and all other list elements will continue to display like normal. It saves you having to use two different classes :)
Your CSS should be like so
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
I think you want something like:
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
Look at the selectors. You want to select a ul with class stack (ul.stack) and find its child li.
There is problem of your selector. class or id of same element never separated by a white space. They should be with no space and the child are separated by a space but no ',' will not be used there..
So you can try this in your code
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
Also you have to place the HTML tag name first and then the preceding attribute.
The problem is that you selected the ul that is a descendent of slide, but your ul has an id of slide, so it doesnt work, because there is no ul that has a container with an id of slide. Also by putting ,li you are selecting all list items on the page. You want to have #slide li, which will only select the list items with a container id of slide. You don't need the #slide ul so your final code should be
#slide li {
float:left;
}
http://jsfiddle.net/G7JHK/6/
As an alternative, you could use ul:nth-of-type(2) instead of an id to save some space in the html
http://jsfiddle.net/G7JHK/7/
I just have been looked into Google's source code and I saw that the side bar is created from the <ul> and <li> tags which the use for them is making list.
So as I said I saw their side menu bar and I tried to do the same, something like this : http://jsbin.com/oyibok/edit#javascript,html,live
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<ul>
<li> dsds </li>
<li> dsds </li>
</ul>
</body>
</html>
not quiet worked out, is there any technique that I can use to do the same as Google's did and make a list without the followed dot?
To get rid of the dots, just add the following css:
ul {
list-style: none;
}
yes - the answer is css. you should do something like
ul {
list-style-type: none; /* look mom - no dots */
}
ul li {
display:inline; /* look mom - no block display - only if you want a horizontal nav */
}
a {
text-decoration:none /* look mom - no underline */
}
also as you may notice if this is a navbar you probably would put links inside the li element with a elements
by the way - all modern nav bars are lists..
In addition to removing the bullets/dots in CSS, you may also want to reset the margins to margin: 0px if you want the top-level list items to be flush with the left side of their container.
In most browsers, just removing the bullets still leaves white space where they normally are.
A list has the bullet points by default, and also some margins and padding.
<ul>
<li>list item 1</li>
</ul>
With CSS you can change the way the list looks.
<style>
/* the styles go in between the style tag */
</style>
You can use CSS to grab each element in the list and change the properties.
For example I usually start by removing the list style, margin and padding.
ul { list-style:none; margin:0; padding:0; }
Next you can change the link or anchor tags to have a width and height and background colour.
Links by defaul are inline elements, which means they don't force a new line but flow inline.. I need them to be displayed as a block element so I can style it.
ul a:link,
ul a:visited { display:block; width:100px; height:20px; line-height:20px; background:blue; }
Now when the user hovers the mouse over the link you can change its colour again, CSS stacks so all the styles you wrote above will still apply but we can over write whatever we choose.
ul a:hover { background:orange; }
Some reading: http://www.w3schools.com/css/css_list.asp
Once you know how to select elements using CSS, you will be able to create pretty much anything.
You can give HTML elements a unique id or a class.
An id is used to select a single element, on it's own.
But if you have a lot of elements, a class is used.
"#" for Ids and a "." For classes.
Example:
<div id="something">some text wrapped in a div with an id</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<style>
#something { background:red; }
.something { background:blue; }
</style>
The startings
http://jsbin.com/oyibok/5/edit