With a simple html list like in the example below, how do I get the list items to center when it goes onto a second line?
<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
.container{max-width:500px;}
li{display:block;float:left;background:grey;}
http://jsfiddle.net/hzazvwte/
When the container is shrunk and the menu items start dropping into the line below, I would like them to be centered. How can I achieve this?
You have to remove float, set text-align: center; to the container, inline-block to items, reset margin / padding and eliminate white spacing between elements.
.container {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
/* float: left; */
background: grey;
margin: 0;
}
Fiddle: http://jsfiddle.net/hzazvwte/4/
Do you mean the text in the li items?
.container{max-width:300px;}
li{
display:block;
float:left;
background:grey;
width: 100px;
text-align: center;
}
Related
I am trying to create a full screen vertical navigation overlay.
I would like to make the ul container the full height of the page and then equally space each li. This list is not a fixed amount so looking for something that will dynamically resize.
Is FlexBox the way to go?
https://jsfiddle.net/w3hppLss/
html, body{margin:0;padding:0;}
ul{list-style:none;height:100vh;}
li{background:grey;margin-bottom:5px;}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
use flexbox with flex-direction:column in ul and flex:1 in li
html,
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
height: 100vh;
background: red;
margin: 0;
padding: 0;
display: flex;
flex-direction: column
}
li {
flex: 1;
background:gray;
margin: 5px
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
I'm currently working on a menu consisting of two parts (see image). On mobile, I'd like to show these menu items stacked from top to bottom, but starting with the bottom menu and ending with the top menu. Is there any (clean) way to do this with CSS or will I have to create two menus and show the correct one depending on page width?
EDIT: To clarify, the image is just to show an example of what I mean. I'm wondering in a more general sense if it's possible to somehow reverse the divs in CSS (without absolute positioning etc).
EDIT 2: Apologies for not adding any code. Here's a small pen that shows the situation: https://codepen.io/anon/pen/GWwrMW
<div class="nav">
<ul class="nav__top">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
<ul class="nav__primary">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
.nav__top,
.nav__primary {
list-style: none;
margin: 0 0 20px 0;
text-align: right;
li {
display: inline-block;
padding: 10px;
background-color: #ccc;
}
}
On mobile, I want the sub items to be displayed underneath the main items.
You can do this with flex and flex-direction: column-reverse, or for more control, using the order property on flex children. But with your example, flex-direction: column-reverse would work.
.nav__top li,
.nav__primary li {
display: inline-block;
padding: 10px;
background-color: #ccc;
}
#media (max-width: 420px) {
.nav {
display: flex;
flex-direction: column-reverse;
}
.nav li {
display: list-item;
}
}
<div class="nav">
<ul class="nav__top">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
<ul class="nav__primary">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
This added CSS will reverse the order in the second menu:
.nav__primary {
display: flex;
flex-direction: row-reverse;
}
You can put it in a media query.
https://codepen.io/anon/pen/ryQjdg
ADDITION: I overread the wish of it to be stacked horizontally. In this case you need
.nav__primary {
display: flex;
flex-direction: column-reverse;
}
If you want responsive nav bar you have to use media queries. Something like this
#media screen and (max-width: 600px){
ul.topnav li {float: none;}}
This will work if your menu was built by list.
Figured it out. Since I only need to support mobile browsers I can use Flexbox:
.nav {
display: flex;
flex-direction: column-reverse;
}
I'm currently trying to make a sidebar layout work. I feel like I'm nearly there but the last bit is just not working.
html,body {
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
width: 100%;
height: 100%;
}
.sidebar {
height: 100%;
position: fixed;
width: 200px;
background: red;
overflow: auto;
flex-direction: column;
display: flex;
}
ul {
padding: 0;
margin: 0;
}
.menu {
flex: 1;
background: rgb(150,0,0);
}
.users {
overflow: auto;
max-height: 240px;
min-height: 100px;
}
<div id="wrapper">
<div class="sidebar">
<ul class="menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
<ul class="users">
<li>user 1</li>
<li>user 2</li>
<li>user 3</li>
</ul>
</div>
<div class="content">
</div>
</div>
Here is a fiddle of the layout which works better to see the issue than the above snippet:
https://jsfiddle.net/ybp4og8w/1/
All works great except when the height of the window gets really small, smaller than the menu items list. The content at the bottom disappears off screen. Ideally I'd like to have the user list sticky at the bottom (which is correct right now but I've also had this issue when messing with the code), not overlap the menu items when the height gets small but instead make the sidebar become scroll-able.
Any tips on how to achieve this?
I see your jsfiddle and apply this code in #sidebar
overflow-y:scroll;
May be this helpful.
Thanks!
This question already has answers here:
How to align a div to the top of its parent but keeping its inline-block behaviour?
(5 answers)
Closed 6 years ago.
I got 3 divs displayed in inline-block way. Each of them has a simple list with links. The thing is second list has only one item.
The way it looks:
The way it should look:
Thanks for any advice!
.column_links{
display: inline-block;
width:28%;
margin-right:60px;
}
.column_social{
width:29%;
display: inline-block;
margin-right:60px;
}
.column_new{
display: inline-block;
}
Use need to set vertical-align:top for display:inline-block.
Because default value is vertical-align:baseline. So, that your div goes to the bottom.
.column_new,
.column_social,
.column_new{
vertical-align: top;
}
Here is Demo Link
use vertical-align:top
Try this Jsfiddle
.column_new,
.column_social,
.column_new{
vertical-align: top;
}
.column_links {
display: inline-block;
width: 28%;
margin-right: 60px;
}
.column_social {
width: 29%;
display: inline-block;
margin-right: 60px;
vertical-align: top;
}
.column_new {
display: inline-block;
}
<div class="column_links">
<h3>
LINKS
</h3>
<hr>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
</ul>
</div>
<div class="column_social">
<h3>
FIND ME
</h3>
<hr>
<ul>
<li>list 1</li>
</ul>
</div>
<div class="column_new">
<h3>
NEW
</h3>
<hr>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
</ul>
</div>
here is jsfiddle: demo
I want my li's to be distributed over 2 rows like this:
item 1 item 3 item 5 item 7 item 9 ....
item 2 item 4 item 6 item 8 ......
My CSS is really bad so I have no clue on how to achieve this and can't find anything on this... I tried some stuff with even and odd items, but I can't figure out how to force even items below odd items.
You can use flexbox to achieve this ordering. Support is pretty good (http://caniuse.com/#feat=flexbox) but you will need to provide fallbacks for older versions of IE.
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100px;
list-style-type: none;
margin: 0;
padding: 0;
width:200px;
}
li {
color: #000000;
height: 50px;
margin: 0;
padding: 0;
width: 100px;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
You can use :nth-child selector to select odd elements in that list items.
Here is an example:
CSS
ul {
position: relative;
white-space: nowrap;
}
li {
display: inline-block;
list-style-type: none;
padding: 0px 5px;
}
li:nth-child(2n) {
top: 100%;
position: absolute;
margin-left: -36px; /* Changes as per the width of the first element */
}
Working Fiddle