I'm creating a simple Navigation menu and am unable to get my button to display inline next to sibling li elements.
I need all three elements inline and floating right.
HTML
<nav>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
<button>A Button</button>
</nav>
And here's the CSS
nav {
float: right;
}
li {
display: inline-block;
}
button {
display: inline-block;
}
Here's the fiddle --- https://jsfiddle.net/et8omw2c/
Okay 2 ways.
One I would recommend changing your markup and include the button within an li element like:
<nav>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li><button>A Button</button></li>
</ul>
</nav>
or change the css like so which I don't recommend:
nav {
float: left;
padding:0;
margin:0;
width:100%;
}
li {
display: inline-block;
float:left;
}
button {
display: inline-block;
float:left;
}
Apply inline-block to the ul element as well.
It is happening because your ul element is display:block. Add float:right to it or use display:inline-block and your problem will be solved.
Use this CSS
ul{
float:right
}
or
ul{
display:inline-block;
}
Related
Why is the dropdown ul in 'Menu Item 2' not being aligned absolutely to the top of its parent li element?
With the dropdown ul CSS set as:
position:absolute;
top:0;
left:0;
I would expect it to be covering from the top left of the parent element, i.e. covering it completely.
Some confusing symptoms:
I want the parent menu to be clickable AND have a dropdown in some cases. So where there is a dropdown, the parent menu <li> has an <a> that is padded to increase the clickable area. This also increases the containing <li>, since the li:hover shows the same padded area. This works as desired.
However, when the dropdown is shown and aligned to <li>, <li> seems to be in the position before it was expanded by <a>. When I check in a browser (Chrome and Firefox) the <li> element is not actually filling the same space as the <a> and so the dropdown appears some amount below the where I want it.
I understand that I can use top:SOME_NEGATIVE_OFFSET in the absolutely positioned dropdown but this feels hacky and I'd like to understand what's going on?
It's my first post, please go easy on me :)
<!DOCTYPE html>
<html>
<head>
<title>DropDownTest</title>
<style>
ul{
list-style:none;
margin:0;
padding:0;
}
li{
display:block;
position:relative;
}
li>a{
padding:1rem;
background-color:grey;
}
li>a:hover{
background-color:lightgray;
}
.mainbar>li{
float:left;
}
li.hasDrop:hover>ul{
display:block;
}
.dropContent{
display:none;
position:absolute;
top:0; /*not working as expected*/
left:0;
margin:0;/*thought this might have helped but no*/
padding:0;
z-index:1;
list-style:none;
min-width:100%;
}
.dropContent>li>a{
display:block;
}
</style>
</head>
<body>
<div>
<ul class="mainbar">
<li>Menu Item 1</li>
<li class="hasDrop">
Menu Item 2
<ul class="dropContent">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Menu Item 3</li>
</ul>
</div>
</body>
</html>
It happens beacuse your a element is getting padding as inline element.
Modify this rule:
li>a {
padding: 1rem;
background-color: grey;
display: block; /* this*/
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: block;
position: relative;
}
li>a {
padding: 1rem;
background-color: grey;
display: block; /* this*/
}
li>a:hover {
background-color: lightgray;
}
.mainbar>li {
float: left;
}
li.hasDrop:hover>ul {
display: block;
}
.dropContent {
display: none;
position: absolute;
top: 0;
/*not working as expected*/
left: 0;
margin: 0;
/*thought this might have helped but no*/
padding: 0;
z-index: 1;
list-style: none;
min-width: 100%;
}
.dropContent>li>a {
display: block;
}
<div>
<ul class="mainbar">
<li>Menu Item 1</li>
<li class="hasDrop">
Menu Item 2
<ul class="dropContent">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Menu Item 3</li>
</ul>
</div>
I have a list of links that are displayed inline. I want the last li to be positioned centered of the inline list above it. How can I do this with css?
The reason for this is, when the web page is used in mobile it can't fit the entire list, so I want to move it below.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Last Item</li>
</ul>
You can do this by setting text-align:center to both the ul and li element:
ul{
list-style:none;
height:100%;
width:100%;
padding:0;
text-align:center;
}
ul li{
text-align:center;
display:inline-block;
width:75px;
height:20px;
background:silver;
border:1px solid black;
padding:10px;
}
IN ADDITION: Make sure that the ul has a width of 100% and the padding of the ul is set to zero. Also, the li must have a display of inline-block.
Check out the fiddle:
http://jsfiddle.net/rmj7q78t/
This css will do the trick:
ul li {
display: inline-block;
}
ul li:last-child {
display: block;
text-align: center;
}
I have code that dynamically generates <ul> lists each with two <li> in them. I want those to be displayed next to each other / broken into the next line if there isn't enough room anymore.
Currently I have this
ul.pictureBlocks{
display: table-cell;
}
This displays them next to each other with 0 space between them. I tried border-spacing and margin or padding but nothing worked. When I used display: table on the ul tag it got the spacing from border-spacing but displayed them beneath each other.
Got it
.pictureblocks{
display: inline-table;
border-spacing: 10px;
border-collapse: separate;
}
you can try this to give space between li and align them horizontally.
/--CSS Code---/
ul{list-style-type:none;}
ul li{display:inline-block; background-color:#ef8913; padding:5px;}
ul li a{ color:blue}
/--HTML Code --/
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Try this link. http://jsbin.com/kunavupa/1/edit
try display:inline-block and then padding or margin...
ul li{
display: inline-block;
background:red;
height:20px;
width:20px;
}
jsfiddle
I want to display a content"--" after every list items but when i use li:after then the content comes below the list items and when i use a:after then the content correctly comes after the list items. However i want the content"--" to be associated with the <li> and not the <a> because when i will be using a:hover then there will be some problem. Here is the code. Can anyone help?
HTML
<ul class="group">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
CSS*
.group:after {
content: "";
display: table;
clear: both;
}
ul {
list-style:none;
background:gray;
}
li {
float:left;
padding-left:30px;
}
a {
text-decoration:none;
display:block;
padding:10px;
color:white;
font-weight:bold;
}
li:after{ content:'--'; }
The problem here is the element :after is rendered after the a tag, since you have this into the a tag:
a {
display:block;
}
The :after content is in the next level pushed by the a block tag. Change this and you see the change:
a {
display:inline-block;
}
The demo http://jsfiddle.net/6YuQ8/3/
I have a nested list for a navigation
<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>item 2.1</li>
<li>item 2.2</li>
<li>item 2.3</li>
</ul>
<li>item 3</li>
</ul>
Now i want to display the top level (item1, 2 & 3) at the top right of the page in a horizontal line. The submenu should be displayed as a list on the left side of the page.
I can not change the HTML aparently.
So how do i get the sublevel out of there?
Using position:absolute it will use the upper level for orientation wich will change depending on the width of the main level.
I need it to use the mother div for orientation so i can place it on the right side of the page.
Is this even possible?
Any ideas anyone?
Are you looking for this?
SEE DEMO
CSS:
ul { float: right; }
ul li { float: left; padding: 0 20px; }
ul li ul { position: absolute; left: 0px; top: 0px; display:none; }
ul li ul li { float: none; }
ul li:hover ul { display: block; }