I have created a menu using ul and li, but it shows me in reverse order. For example:
FAQ PRICING TOUR HOME instead of the expected HOME TOUR PRICING FAQ
.header ul {
}
.header li {
list-style-type: none;
margin-left: 40px;
float: right;
}
<div class="header">
<ul>
<li>HOME</li>
<li>TOUR</li>
<li>PRICING</li>
<li>FAQ</li>
</ul>
</div>
What's wrong in my code?
You should float only the ul right. The list items should be floated left in the correct (expected) order:
.header ul {
float:right;
}
// expected order. It's the default value if not overriden,
// therefore it is not realy needed
.header li
{
float:left;
}
Instead of taking float right take it as left then you will get the result HOME TOUR PRICING FAQ
To understand it let us see :
Here you are trying to print HOME TOUR PRICING FAQ and if you will float this to the right it means you are telling to print from right and that's why it gives you the output as
FAQ PRICING TOUR HOME so that's why we use float: left;
.header ul
{
}
.header li
{
list-style-type: none;
margin-left: 40px;
float: left;
}
<div class="header">
<ul>
<li>HOME</li>
<li>TOUR</li>
<li>PRICING</li>
<li>FAQ</li>
</ul>
</div>
DEMO
It's because you're floating each list element right.
Set float: right on the parent element instead.
.header ul {
float: right;
}
There are various other solutions, see here
Here's a demo
The reasons seems to be the float element. When you give float:right, it takes the first element to the right most side and rest of the items after that. However if you give float:left, the items seems to come in correct order with positioning the first item in the left and rest of the items after that.
try something like this
.header ul {
float: right;
}
.header li {
list-style-type: none;
margin-left: 40px;
float: left;
}
Reason
you are floating li element to right so instead float it to left.
float li parent element ie ul to left.
Related
I have a list that displays numbers with decimals. I want them all aligned in the center but they have different decimal lengths so it's kinda causing some UI issues.
Example its current displaying something like
14.88
18.123
20.452
10.22
3.1
Its current HTML & CSS is simply
.my-list {
text-align: center
}
<ul class="my-list">
<li>14.88</li>
</ul>
Can anyone show me how to update my CSS so it displays something like this
14.88
18.123
20.452
etc
In short I want the list to be aligned on the center, but I want the list items to be aligned on the left.
Assuming you want the list itself centered with the items left aligned:
Option 1: Using the list as a block but a fixed width
ul {
padding: 10px;
list-style-type: none;
background-color:#ccc;
width: 25%;
/*Centers the list*/
margin: 0 auto;
}
/*Not required in my example, but you may need it*/
li
{
text-align:left;
}
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
Option 2: Wrap the list in a div and set the list to inline-block
div {
/*Centers this list*/
text-align: center
}
ul {
padding: 10px;
list-style-type: none;
background-color: #ccc;
display: inline-block;
/*Left align contents of list*/
text-align: left;
}
<div>
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</div>
See this article for more centering options: https://css-tricks.com/centering-css-complete-guide/
You are using text-align:center.
Try the same with:
.my-list {
text-align: left
}
This should do it.
You can try list-style css property for the same, to remove the bullets
.myList{
text-align:left;
list-style:none;
}
.mylist{
list-style:none;
width:100px;
}
.mylist li{
text-align:center;
}
<!DOCTYPE html>
<html>
<body>
<ul class="mylist">
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</body>
</html>
i have some css to align two parts of a list item to the left and right side like so :-
ul li div.left {
float:left;
}
ul li {
text-align:right;
}
<ul>
<li><div class="left">On the left</div>On the right</li>
</ul>
Is it possible to extend the above to add one more part that aligns to the bottom left below the left and right parts?
i have tried :-
<li><div class="left">On the left</div>On the right<p><div class="left">At the bottom<div></p></li>
but it doesnt render correctly
You will need to modify your HTML structure like I've done below and then style accordingly to create the sort of a layout which you want.
Here's a working demo:
ul {
padding: 0px;
}
ul li {
list-style-type: none;
}
ul li.left {
float: left;
}
ul li.right {
float: right;
}
ul li.center {
text-align: center;
}
.block {
overflow: hidden;
}
<ul>
<div class="block">
<li class="left">On the left</li>
<li class="right">On the right</li>
</div>
<li class="center">centered underneath</li>
</ul>
Here is my code: http://jsfiddle.net/DFN5y/
As you can see the list items on the right are on the line below. Can anyone please tell me how to remedy this? This is my code:
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
</ul>
<ul id="nav" style="float:right;">
<li>Sign up</li>
<li>Login</li>
</ul>
You could set them inline by making ul as inline-block element
ul {
display: inline-block;
}
but you have two nav's and duplicate id's so look at the example below and try to follow that style in future coding
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
<li class="right">Sign up</li>
<li class="right">Login</li>
</ul>
#nav li {
display: inline-block;
padding-left: 40px;
}
.right{
float: right;
}
or you could float them without class e.g.
#nav li:nth-child(3),
#nav li:nth-child(4) {
float: right;
}
or even simpler by moving just third element e.g.
#nav li:nth-child(n+3) {
float: right;
}
FIDDLE
your #nav is having 100% width and does not have float, thats why its taking complete space till right edge.
#nav {
float: left;
padding-left: 100px;
}
Fiddle
Try:
ul li {
display: block;
float:left;
padding-left: 40px;
}
Just add this to your CSS :
ul{ display : inline-block;}
And please change the id's of your ùl`tags so that they are different ! Id's should be unique on the page.
Have a look at this fiddle.
Basically i have changed the original in 4 ways:
replaced the id nav, which had been issued twice, by a class of the same name
distinguished between the first and the second nav-ul in css formatting
moved the style dfinitions from the element attribute to the css (somehow the float rule messed up teh alignment)
all nav-ul being displayed as inline-block to assue verticla alignment.
You'd be better off adding them all to the same ul element and then using the :nth-child pseudo-selector to add additional padding to the middle elements to create the separation you want.
http://jsfiddle.net/DFN5y/17/
ul li:nth-child(3){
padding-left: 20%;
background: red;
}
With this snipit of html I'm trying to get my menu to display at the top of the page with each link following to the right of the prev one. However at the moment they display one after the other. I've tried to style it with the shown CSS.
Can someone tell me whats wrong with this?
<nav class="grid_4 topmenu">
<ul>
<li>About Us
</li>
<li>Our Cheeses
</li>
<li>Contact Us
</li>
</ul>
</nav>
.topmenu {
display:inline;
margin: 2% 0;
padding: 1% 0;
text-align: right;
}
Since you added the class into nav it wont work, because it the display: inline; not excute in li tags, he excute the display in nav tag.
so all I had to do is add .topmenu li element instead .topmenu, like that:
.topmenu li {
display:inline;
margin: 2% 0;
padding: 1% 0;
text-align: right;
}
fiddle
An alternative solution to #Yotam's suggestion is to use a left float with a list decoration of none.
The code looks like this:
.topmenu li {
float: left;
margin: 2%;
padding: 1% 0;
list-style-type: none;
}
jsfiddle
I have list menu
<ul>
<li>item1</li>
<li>item2</li>
<li>longitem3</li>
</ul>
menu css
ul{
width:500px;
}
li {
float:left;
}
i would like to automatically distribute my items in menu so they would have the same space between them like this
{menu}{item}{space}{item}{space}{item}{menu}
is it possible to do this using only html and css, not javascript? Thanks
I would use a css class rather than affecting all the < li>, like this:
<li class="menuItem">
As for the css:
.menuItem {
float: left;
margin-right: <some number of px>;
}
.menuItem:last-child {
margin-right: 0;
}
The ':last-child' selector overrides the previous definition and removes the right space for the last menu item.
You can add a margin to the right side of your li's
li { float:left; margin-right: 5px}
Just add some padding to the right of each li item, e.g.
li {
float:left;
padding-right:20px;
}
ul {
text-align: center;
}
li {
display: inline-block;
}