I'm trying to add a top margin to every li element in a ul element that has the css property column-count: 2 set. For some reason, the margin works for every li element except the first element in the second column:
ul {
column-count: 2;
padding: 0;
border: 1px solid black;
}
li {
margin-top: 10px;
}
li:nth-child(1) {
background-color: red;
}
li:nth-child(5) {
background-color: blue;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
What about just using margin-bottom instead? Also apply 10px padding to your ul in order to achieve the same.
ul {
column-count: 2;
padding: 10px 0 0 0;
border: 1px solid black;
}
li {
margin-bottom: 10px;
}
li:nth-child(1) {
background-color: red;
}
li:nth-child(5) {
background-color: blue;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
You could set the display property of the list items to inline-block and the width to 100% to remedy this
ul {
column-count: 2;
padding: 0;
border: 1px solid black;
}
li {
margin-top: 10px;
display: inline-block;
width: 100%;
}
li:nth-child(1) {
background-color: red;
}
li:nth-child(5) {
background-color: blue;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
The suggestion #Troels gave is a good option. You can look into padding as an option too:
li {
padding-bottom: 10px;
}
Related
So I'm trying to make a box/div with a max-height that contains 2 vertical scrollable lists of items that adjusts their heights depending on the amount of the items while still fitting in the parents' max-height. Example. And if both of them have overflowing items I want both lists to have 50% height. Example 2. Sorry if this sounds a little cryptic and hard to understand, having a hard time trying to describe it.
This is what I currently have.
HTML:
<div class="list-box">
<div class="list-1">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="list-2">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
SASS:
.list-box {
display: flex;
flex-direction: column;
max-height: calc(100vh - 15rem);
.list-1,
.list-2 {
height: auto;
overflow-y: auto;
}
}
Hope this will fix your issue.
HTML
<div class="parent-wrap">
<div class="child-wrap"></div>
<div class="child-wrap"></div>
<div>
CSS
.parent-wrap {
height: 100%;
border: 1px solid;
height:600px;
padding: 3px;
display: flex;
flex-direction: column;
}
.child-wrap {
border: 1px solid red;
overflow: auto;
}
.child-wrap:nth-child(1) {
max-height: 50%;
}
.child-wrap:nth-child(2) {
flex: 1;
}
I think you haven't need to flex.
/*CSS:*/
* {
box-sizing: border-box;
}
.list-box {
height: 500px;
border: solid green;
}
.list-1,
.list-2 {
overflow: auto;
max-height: 50%;
}
.list-1 {
border: solid red;
}
.list-2 {
border: solid blue;
}
<!-- HTML -->
<div class="list-box">
<div class="list-1">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="list-2">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
I have elements that are floating left and have the width of 33.33333% I am struggling to get these elements to center on the page, I still want the text inside the elements to text-align: left, but I have no idea how to center these items on the page:
ul.home-product-list {}
.home-product-list li {
float: left;
width: 33.33333%;
}
<ul class="home-product-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Screenshot
What do I do?
Try applying margin: 0 auto; to items that you wanna centre them.
ul.home-product-list {
width: 100%;
}
.home-product-list li {
width: 33.33333%;
margin: 0 auto;
}
<ul class="home-product-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<div class="container__list">
<ul class="home-product-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
.container__list {
margin: 0 auto;
max-width: 960px;
}
ul.home-product-list {}
.home-product-list li {
float: left;
width: 33.33333%;
}
Hope this helps, if you are trying to center everything inside the row. Max-width could vary, I just added a random number, so you can add your custom width.
Try following code
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100%;
display: inline-block;
text-align: center;
}
ul.home-product-list {
display: inline-block;
width: 100%;
/* margin: 0px auto; */
list-style-type: none;
padding-left: 0px;
}
li {
float: left;
width: 33%;
}
</style>
</head>
<body>
<div>
<ul class="home-product-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</body>
</html>
I would like to do this in CSS if this is possible with no javascript.
I have a list with x amount of items, it could anything. Here is a picture
The container is a % of the screen, so as i resize, the ul gets smaller, therefore the list items go on a new line.
What I would like to do is give the ul an text alignment of center if there is 1 line and text align of left if there is 2.
Is this possible with css only?
I cant do media queries as the number of items could be anything.
Are you looking for something like this?
body {
background: #11b5c3;
font-family: sans-serif;
padding: 50px;
}
h1 {
color: #fff;
text-align: center;
font-weight: 100;
}
/*
.container {
border-top: 1px solid #fff;
padding: 10px 0;
margin: 0 auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
width:75%;
}
.container li {
background: #fefefe;
margin: 3px;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
color: #999;
}*/
.container {
border-top: 1px solid #fff;
padding: 10px 0;
margin: 0 auto;
list-style: none;
/* display:flex; */
/*justify-content:center;*/
flex-wrap: wrap;
max-width: 500px;
text-align: justify;
}
.container li {
background: #fefefe;
;
margin: 3px 0;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
color: #999;
display: inline-block;
font-size: 16px;
}
<h1>Tools</h1>
<ul class="container">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
I am piggy-backing off #Mobarak Ali but I think in this case you want to use grid and not flexbox. If you use flexbox with flexwrap: wrap; and justify-content: center; the items will always be centered. But the OP wants the items to be centered if they don't wrap but then justify on the left side on each subsequent row. Because grid is used for 2d layouts it can achieve this pretty easily.
Add or delete list items to see the effect. Here is a codepen if you prefer that.
https://codepen.io/zenRyoku/pen/rgWBEp
body {
background: teal;
font-family: sans-serif;
padding: 50px;
}
h1 {
color: #fff;
text-align: center;
font-weight: 100;
}
.container {
border-top: 1px solid #fff;
padding: 10px 0;
margin: 0 auto;
list-style: none;
display: grid;
justify-items: center;
grid-template-columns: repeat( auto-fit, minmax(50px, 1fr) );
grid-gap: 1rem;
max-width: 500px;
}
.container li {
width: 50px;
background: #fefefe;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
color: #999;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h1>Tools</h1>
<ul class="container">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</body>
</html>
I am building a complex webapp using React and I'm trying to figure out the smartest way to handle a complex positioning and layering situation.
I'm wondering if I need to rethink my entire structure or just tweak some css values.
The code below explains my issues:
aside {
position: absolute;
top: 0;
left: 0;
width: 20%;
height: 100vh;
background: blue;
color: white;
}
main {
position: absolute;
overflow: hidden;
background-image: url('https://i.ytimg.com/vi/6sta6Gkpgcw/maxresdefault.jpg');
background-size: cover;
top: 0;
left: 20%;
width: 80%;
height: 100vh
}
.page-wrap {
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
}
.overlay {
position: fixed;
z-index: 1;
padding: 40px;
color: white;
font-size: 24px;
width: calc(80% - 80px);
height: 100vh;
background-color: rgba(0, 0, 0, .5);
}
ul {
position: relative;
z-index: 2;
list-style: none;
color: white;
font-size: 24px;
line-height: 2em;
padding-top: 100vh;
}
ul li {
display: inline-block;
width: 200px;
height: 200px;
text-align: center;
padding: 20px;
background: #ccc;
color: red;
margin: 50px;
}
button {
padding: 10px 30px;
background: green;
color: white;
font-size: 24px;
}
<aside>
SIDEBAR
</aside>
<main>
<section class="page-wrap">
<div class="overlay">
<button>
This needs to be clickable even though the list is on top
</button>
<div>
<h1>My issues here are:</h1>
<ol>
<li>the green button is covered (disabled) by the list</li>
<li>the overlay covers the scrollbar on its parent page-wrap section</li>
</ol>
</div>
</div>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>6</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>vew</li>
<li>Item</li>
</ul>
</section>
</main>
FIDDLE
My solution was to restructure the DOM so the body had the overflow. I had been trying to avoid this because it's a large webapp with a lot of components and pages, many of which suffered collateral damage, but ultimately, it solved my problem.
I have a fixed sidebar, with overflow-x:hidden so I get a scrollbar to scroll. But now I want to add a submenu, that when shown will overflow into the main window.
This works fine if I set overflow:visible but then I lose the scrolling ability.
Can I get them both together?
http://codepen.io/anon/pen/OPzvdP
#sidebar-wrapper {
width: 200px;
background-color: #396DA5;
position: fixed;
height: 100%;
overflow-x: hidden;
}
#menu ul ul {
display: none;
list-style: none;
}
#menu ul ul {
position: relative;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul ul {
padding: 50px;
position: absolute;
left: 80%;
top: 0;
background: #f00;
}
<div id="sidebar-wrapper">
<div id=menu>
<ul>
<li>Item Hover
<ul>
<li>subitem<li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</div>
</div>
The top li item has a hover, that can be fully see when the overflow-x:hidden is removed from the top css line, but then the side bar cant be scrolled!
EDIT - Answers have said use position:fixed and this works. But can this be applied to any of the list items so the submenu opens beside the parent?
No need to add overflow-y.
Your class should be
#menu ul li:hover > ul {
display: block;
position: fixed;
top: 8px;
left: 150px;
}
DEMO
Try
overflow-y: scroll
and set your hover box to position fixed:
#menu ul ul { padding:50px; position: fixed; left: 200px; top:0; background:#f00;}
You will need to adjust the position.
Not a very pretty solution though.