I am working on an un-ordered list. I have searched all over the internet for a good tutorial but I cannot find one. I want to display it inline and have a border line in between each <li> item. Now I am just unsure of the standards for styling lists. Do I use padding/margins to position the <li> items? If so do I apply it to the <ul> container or <li> or <a>?
Try using margins, borders, and float.
<html>
<head>
<style type="text/css">
.liClass
{
float:left;
padding-right:10px;
padding-left:10px;
border-right:thick double #ff0000;
}
.lastLi
{
float:left;
padding-left:10px;
}
</style>
</head>
<body>
<ul>
<li class="liClass">one</li>
<li class="liClass">two</li>
<li class="lastLi">three</li>
</ul>
</body>
</html>
Apply float:left; to <li> and style as needed.
Use display: inline-block to make the list items appear side-by-side (it is more reliable than float: left), then add borders or whatever else you want - maybe a width and some margin.
You can use display: inline-block to avoid having to mess with clearing floats:
http://jsfiddle.net/ZehJN/
Related
For a horizontal menu i want to justify the list items over the full width.
This works:
CSS:
ul {height: 1em;text-align: justify;overflow: hidden;padding-left: 0;}
li {display: inline-block;}
li:last-child {padding-left: 100%;}
HTML:
<ul>
<li>flexible number</li>
<li>and length of</li>
<li>list items</li>
<li>hidden</li>
</ul>
OUTPUT (the lines are showing the width of the UL):
|flexible number and length of list items|
If i delete all whitespaces and linebreaks to minify the HTML-output, it doesn't work any more.
SMALLER HTML:
<ul><li>flexible number</li><li>and length of</li><li>list items</li><li>hidden</li></ul>
It looks like this:
|flexible numberand length oflist items |
Is there any chance to get the "normal" behavior back with pure CSS?
Please have a look at this fiddle:
http://jsfiddle.net/Tfranz/HpP99/
Check out the jsFiddle below - you should be able to use % widths and floats to do this without padding or margins. Standard minification should not affect the results.
http://jsfiddle.net/MNally/CWjMz/
HTML:
<div id="container">
<ul id="the-list">
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
CSS:
div#container {
width:100%;
padding:0;
margin:0;
}
ul#the-list {
width:100%;
text-align:center;
}
li {
float:left;
display:inline;
padding:0;
margin:0;
background:#c9c;
width:33.333%;
}
I set the margin/padding to '0' to illustrate that they're not needed. You can remove these lines.
How about using display:table; and display:table-cell; ?
See here: http://jsfiddle.net/HpP99/2/
I ran into the same exact problem. HTML minification removes whitespaces as we all know, but in this case it breaks the CSS "text-align: justify" and "text-align-last: justify".
The solution is to implement a single line jQuery code to add white spaces back after the closing tags for the list items:
$('#the_list li').after(" ");
I hope someone finds this helpful.
I have bootstrap navbar and i want the links in the top of the list item
<li>
<a class="menuLinks" href="http://news.bootswatch.com">Blog</a>
</li>
CSS:
.menuLinks {
vertical-align:top;
}
I tried this too:
.menuLinks {
position:absolute;
top:0;
}
and it didn't work too.
How can I do that?
Try to add this properties:
display:table-cell;
height:40px;
vertical-align: top;
Need more information to know what you want to do. If its positioning the element, you can change that in your css with margins etc. Or if you want it above other elements then you need to move the html code above those elements. If you display more of the code it might make it easier to help you.
This is the code for a horizontal <ul> that I'm using:
.list ul{
width: 100%;
}
.list li{
display: inline;
list-style-type: none;
padding-right: 20px;
padding-bottom: 20px;
}
Using this, if I do this:
<ul class="list">
<li>
<img src="myImg.png" />
<span class="edit"></span>
<span class="delete"></span>
</li>
</ul>
Then it all works, however if I put a <br> between the image and the edit/delete buttons, e.g:
<ul class="list">
<li>
<img src="myImg.png" />
<br />
<span class="edit"></span>
<span class="delete"></span>
</li>
</ul>
Then the list breaks, and I get the images in a vertical list instead of horizontal. Screenshot when its working:
Screenshot of when its not working:
Any ideas?
Replace the
display: inline
with
float: left
Example fiddle
The solution is to use: display:inline-block on your li element which then allows all other markup to function correctly, both in and out of your list.
inline-block: The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
Here is a jsfiddle showing an example.
The above jsfiddle is now edited to support older IE7 to work alongside modern browsers. The order of the .css for display is important. To throw in support for IE6, then additonal _height: 30px; where 30 is your required height needs to be added. But IE6 browser use is less than 1%.
Try to use for .list li { float:left; } instead { display:inline; } and will work.
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
I have an html file with an unordered list. I want to show the list items horizontally but still keep the bullets. No matter what I try, whenever I set the style to inline to meet the horizontal requirement I can't get the bullets to display.
The best option I saw in other answers was to use float:left;. Unfortunately, it doesn't work in IE7 which is a requirement here* — you still lose the bullet. I'm not really keen on using a background image either.
What I'm gonna do instead (that no one else suggested, hence the self-answer) is go with manually adding • to the my html, rather than styling this. It's less than ideal, but it's the most compatible option I found.
edit: *Current readers take note of the original post date. IE7 is unlikely to be a concern anymore.
I had the same problem, but only in Internet Explorer (I tested version 7) - not in Firefox 3 or Safari 3. Using the :before selector works for me:
ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: '\ffed';
margin-right: 0.5em;
}
I'm using a square bullet here, but a normal bullet \2022 would work the same.
You could also use a background image on the <li> elements, with a padding to keep the text from overlapping it.
li {
background-image: url(i/bullet.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
The browser displays the bullets because the style property "display" is initially set to "list-item". Changing the display property to "inline" cancels all the special styles that list items get. You should be able to simulate it with the :before selector and the content property, but IE (at least through version 7) doesn't support them. Simulating it with a background image is probably the best cross-browser way to do it.
Keep them display blocked, give them a width and float left.
That will make them sit by side, which is like inline, and should maintain the list style.
It's actually a very simple fix. Add the following to the ul:
display:list-item;
Adding this CSS line will add the bullet points.
I was just messing around and I ran into the same issue with the same browser constraints; when I searched for an answer your post came up without the answer. This is probably too late to help you, but I thought for posterity's sake I should post it.
All I did to solve my problem was to embed another list with one item within each list item of the first list; like so...
HTML:
<div class="block-list">
<ul>
<li><ul><li>a</li></ul></li>
<li><ul><li>b</li></ul></li>
<li><ul><li>c</li></ul></li>
</ul>
</div>
CSS:
.block-list > ul > li { display: inline; float: left; }
IE7 Page:
o a o b o c
...it is a dumb solution, but it seems to work.
Did you try float: left on your <li/>? Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul li {
float: left;
margin-left: 2em;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test2</li>
</ul>
</body>
</html>
I only tested Firefox 3.0.1, works there. The margin is set because else your bullet overlaps the previous item.
addition:
Be wary that when you float the items you remove them from the normal flow, which in turn causes the <ul/> to have no height. If you want to add a border or something, you'll get weird results.
One way to fix that is to add the following to your styles:
ul {
overflow: auto;
background: #f0f;
}
You may set <ul> as a CSS grid and <li> as cells to get similar layout to inline <li> and keep bullets easily:
ul {
display: grid;
grid-template-columns: 100px 100px 100px; /* or a smarter width setting */
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
You could use Character entities, see reference : http://dev.w3.org/html5/html-author/charref
<ul class="inline-list>
<li> • Your list item </li>
</ul>
In HTML, I added a break after each li like this:
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
And CSS:
li { float:left; }
Using float: left didn't work very well for me because it made the content box of the ul element 0 pixels high. Flexboxes worked better:
ul {
display: flex;
flex-wrap: wrap;
}
li {
margin-right: 24px;
}
You can use following code
li {
background-image: url(img.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}