i have a section, and inside of it an ul with 4 li. In each li a div that are going to be cards. I want to centralize the text inside the div and put it closer to the bottom.
I tried using float: left, and then change the position with margin top and left, but i cannot centralize it.
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
Add these to .cardd2
display: flex;
align-items: center;
justify-content: space-evenly;
take note of them young padawan, you're gonna use it a lot
also add margin-bottom: 1vh; for separation
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
display: flex;
align-items: center;
justify-content: space-evenly;
margin-bottom: 1vh;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
I think that this is the code that you want.
I assume that you need to have the text inside lis to be centered vertically and want it to be a bit down to the bottom.
.cards2{
text-align: center;
}
.list2{
list-style: none;
}
.list2 li{
display: inline-block;
}
.cardd2{
width: 200px;
height: 300px;
background-color: rgb(107, 255, 240);
display: flex;
align-content: center;
margin: 10px;
justify-content: center;
}
.list2 p{
text-align: center;
display: flex;
margin-top:100%;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1"><p>Sobre mim</p></div>
</li>
<li>
<div class="cardd2" id="card2"><p>Projetos</p></div>
</li>
<li>
<div class="cardd2" id="card3"><p>Habilidades</p></div>
</li>
<li>
<div class="cardd2" id="card4"><p>Contato</p></div>
</li>
</ul>
</section>
Add the following to .cardd2:
margin-bottom: .25rem;
display: flex;
align-items: center;
justify-content: center;
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
margin-bottom: .25rem;
display: flex;
align-items: center;
justify-content: center;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1"><p>Sobre mim</p></div>
</li>
<li>
<div class="cardd2" id="card2"><p>Projetos</p></div>
</li>
<li>
<div class="cardd2" id="card3"><p>Habilidades</p></div>
</li>
<li>
<div class="cardd2" id="card4"><p>Contato</p></div>
</li>
</ul>
</section>
Maybe Like this:-
* {
padding: 0px;
margin: 0px;
}
.list2 {
display: flex;
positition: absloute;
align items: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
Related
I would like to make below image. However, I could not combine both display:inline and display: block together. If I use display: block, everything goes on the same line. On the other hand, if I use display block, every element goes to new line.
Here is my code
HTML
<ul>
<li class="icon">
<img src="images/how/post.png" alt="post">
<h4>1. Post</h4>
</li>
<li class="icon">
<img src="images/how/wait.png" alt="wait">
<h4>2. Wait</h4>
</li>
<li class="icon">
<img src="images/how/select.png" alt="select">
<h4>3. Select</h4>
</li>
</ul>
CSS
ul{
list-style: none;
li{
display: inline;
h4{
display:inline;
}
}
img{
width: 6rem;
}
}
Please see an image here of what I would like it to be.Image
use this way display:inline-block and display:block
ul {
list-style: none;
}
ul li {
display: inline-block;
}
ul li h4 {
display: block;
text-align: center;
}
ul img {
width: 6rem;
}
img {
width: 70px;
}
<ul>
<li class="icon">
<img src="https://www.google.co.in/logos/doodles/2018/new-years-eve-2018-4995722058399744.2-law.gif" alt="post">
<h4>1. Post</h4>
</li>
<li class="icon">
<img src="https://www.google.co.in/logos/doodles/2018/new-years-eve-2018-4995722058399744.2-law.gif" alt="wait">
<h4>2. Wait</h4>
</li>
<li class="icon">
<img src="https://www.google.co.in/logos/doodles/2018/new-years-eve-2018-4995722058399744.2-law.gif" alt="select">
<h4>3. Select</h4>
</li>
</ul>
If you remove all the features that HTML list gives, you probably don't need a list. I suggest using divs instead. Set your container with
display: flex;
justify-content: space-between;
to get the layout you want.
.container {
display: flex;
justify-content: space-between;
}
.icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;
}
h4 {
font-size: 50px;
font-weight: bold;
}
img {
width: 6rem;
}
<div class="container">
<div class="icon">
<img src="https://via.placeholder.com/200" alt="post" />
<h4>1. Post</h4>
</div>
<div class="icon">
<img src="https://via.placeholder.com/200" alt="wait" />
<h4>2. Wait</h4>
</div>
<div class="icon">
<img src="https://via.placeholder.com/200" alt="select" />
<h4>3. Select</h4>
</div>
</div>
Please try this:
HTML:
<ul>
<li class="icon">
<img src="images/how/post.png" alt="post">
<h4>1. Post</h4>
</li>
<li class="icon">
<img src="images/how/wait.png" alt="wait">
<h4>2. Wait</h4>
</li>
<li class="icon">
<img src="images/how/select.png" alt="select">
<h4>3. Select</h4>
</li>
</ul>
SCSS:
ul{
padding-left: 0;
list-style: none;
li{
float: left;
display: inline-block;
width: 33.33%;
text-align: center;
h4{
display:inline-block;
width: 100%;
}
}
img{
width: 6rem;
}
}
pls try this code
<html>
<head>
<style>
ul {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
ul li{
display: flex;
flex-direction: column;
}
ul li h4 {
display: inline;
}
ul li img {
width: 6rem;
}
</style>
</head>
<body>
<ul>
<li class="icon">
<img src="images/how/post.png" alt="post">
<h4>1. Post</h4>
</li>
<li class="icon">
<img src="images/how/wait.png" alt="wait">
<h4>2. Wait</h4>
</li>
<li class="icon">
<img src="images/how/select.png" alt="select">
<h4>3. Select</h4>
</li>
</ul>
</body>
</html>
I'm trying to center these images in the UL. I've looked at some of the other topics on this, but couldn't apply the solutions to my situation. If anyone can help me, I'd appreciate it. Thank you.
JSFiddle: https://jsfiddle.net/dvbL2d5y/1/
HTML
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS
#posts-wrap {
padding: 30px 50px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
Please apply below css. i have removed the float property and introduce display:inline-block.
#posts-wrap {
padding: 30px 50px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
padding:0;
}
#equipment-gallery li {
display: inline-block;
list-style: none;
margin: 20px;
}
I have modified your code. I hope it helps. You just need to add inline-block to an element if you want to center it with the help of text-align: center tag.
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
display:inline-block;
margin:0;
padding:0;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Is this what you were looking for?
#equipment-gallery li {
float: left;
list-style: none;
margin: 0 auto;
display: block;
width: 100%;
}
Remove "float:left" from this class"#equipment-gallery li" and add "display:inline-block"
#equipment-gallery li {
display: inline-block;
list-style: none;
margin: 20px;
}
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
display: inline-block;
padding: 0;
text-align: center;
}
#equipment-gallery li {
float: none;
list-style: none;
margin: 20px;
display: inline-block;
}
You can see link fiddler add this css https://jsfiddle.net/zdso82b7/1/
To align center I had used flexbox concept in ul tag
ul.medium-grid {
display: flex;
align-items: center;
justify-content: center;
flex-flow: wrap row;
}
for more details regarding flex box, please find on CSS-Tricks A Complete Guide to Flexbox
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
display: flex;
justify-content: center;
flex-flow: wrap row;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I'm recreating an article I found on The Economist and I'm having trouble creating the header. Please keep in mind I'm doing this without recreating their code verbatim. I'm trying to create my own implementation.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
I'm having trouble getting the paragraph element, and ultimately its container to sit to the right as shown in the article.
Thoughts on this?
You can use display: flex; justify-content: space-between; on the element that wraps the the left/right portions of the header to put those in a row separated by the available space left over. And you can use align-items to align that content vertically.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
This is happening due to your class="header__site-functions" is ablock element and is taking the 100% of the width, so it doesn't fit in a line. You can use a floating element to fix it:
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline-block;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
.header__site-functions{
float:right;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
I know that a border can be used in lieu of the horizontal line tag (hr). However, in this case I don't want the line to take up 100% width; the current div does and so would the border if I were to put a border in.
So I would like to put a horizontal line (hr) in with 80% width but it's not showing up, well specifically the width is not 80%. The place at which I want to insert it is the very first line after the bottom class in my code.
My intention is to put the horizontal line (hr) right above the Cola (<p class="center1">Cola</p>) on the page. Also the styling doesn't seem to work either here for the hr class; trying to put a width and a color on it.
* {
margin: 0;
}
body {
background-color: green;
}
html,
body {
height: 100%;
}
#subnav {
height: 10%;
text-align: center;
}
#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: red;
text-align: center;
width: 100%;
font-weight: bold;
}
#subnav li {
display: inline-block;
}
#subnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#subnav li a:hover {
color: yellow;
}
#subnav li a:active {
color: yellow;
}
#bigwrap {
height: 100%;
}
.container {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
min-height: 100vh;
width: 80%;
margin: 0 auto;
background-color: white;
font-size: 20px;
}
.top {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
}
.bottom {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
}
.bottom {
flex: 0 0 100%;
height: 50%;
}
hr.style1 {
border-top: 1px solid #8c8b8b;
width: 80%;
}
.top {
flex: 0 0 100%;
height: 50%;
}
.topa {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: flex-start;
margin-left: 3%;
width: 45%;
height: 100%;
}
.topb {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
width: 50%;
height: 100%;
}
li {
list-style-type: none;
font-size: 18px;
}
.advisory {
background-color: white;
margin: auto;
width: 100%;
}
#advisory ul li {
margin-bottom: 2%;
}
.center {
text-align: center;
}
.center1 {
text-align: center;
color: green;
font-size: 28px;
}
.tpoint {
font-size: 24px;
color: orange;
}
<div class="container">
<div id="subnav">
<ul>
<li> Sam
</li>
<li> Sam
</li>
<li> <a class="active" href="#">Corn </a>
</li>
<li> Sam
</li>
<li> Sam
</li>
<li> Sam
</li>
<li> Sam
</li>
</ul>
</div>
<div class="top">
<div class="topa">
<img src="ham.jpg" width="209" height="205" alt="Picture of kid" />
<img src="bacon.jpg" width="209" height="205" alt="Picture of kid\" />
</div>
<div class="topb">
<h2> Sams </h2>
<p>Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence
this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample
sentence this Sample sentence this Sample sentence this Sample sentence this</p>
</div>
</div>
<div class="bottom">
<div class="sam">
<hr class="style1">
<p class="center1">Cola</p>
<p class="center tpoint">Sample</p>
<ul>
<li>Sample
<ul>
<li>Sample</li>
<li>rsam</li>
</ul>
</li>
<li>san
<ul>
<li>sam</li>
<li>sam</li>
</ul>
</li>
<li>sam
<ul>
<li>sam</li>
<li>sam</li>
</ul>
</li>
<li>sam
<ul>
<li>sam</li>
<li>sam</li>
</ul>
</li>
<li>sam
<ul>
<li>sam</li>
<li>sam</li>
</ul>
</li>
</ul>
<p class="center tpoint">The sam</p>
<ul>
<li>sam
<ul>
<li>sam</li>
</ul>
</li>
<li>sam</li>
<li>sam</li>
<li>sam</li>
<li>sam</li>
<li>sam</li>
<li>sam</li>
<li>sam</li>
</ul>
<p class="center tpoint">Eggs</p>
<ul>
<li>sam
<ul>
<li>san</li>
</ul>
</li>
<li>Eri
<ul>
<li>Sam</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
You may modify your CSS as following:
Add width 100% to the class sam:
.sam {
width: 100%;
}
Add centering to the class style1:
.style1 {
width: 80%;
margin-left: auto;
margin-right: auto;
}
Your hris inside a container that has a smaller width (div .sam), so it's width is 80% of that container. Just move it up in the HTML code, above the .bottom div:
* {
margin: 0;
}
body {
background-color: green;
}
html,
body {
height: 100%;
}
#subnav {
height: 10%;
text-align: center;
}
#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: red;
text-align: center;
width: 100%;
font-weight: bold;
}
#subnav li {
display: inline-block;
}
#subnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#subnav li a:hover {
color: yellow;
}
#subnav li a:active {
color: yellow;
}
#bigwrap {
height: 100%;
}
.container {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
min-height: 100vh;
width: 80%;
margin: 0 auto;
background-color: white;
font-size: 20px;
}
.top {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
}
.bottom {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
}
.bottom {
flex: 0 0 100%;
height: 50%;
}
hr.style1{
border-top: 1px solid #8c8b8b;
width: 80%;
}
.top {
flex: 0 0 100%;
height: 50%;
}
.topa {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: flex-start;
margin-left: 3%;
width: 45%;
height: 100%;
}
.topb {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
width: 50%;
height: 100%;
}
li {
list-style-type: none;
font-size: 18px;
}
.advisory {
background-color: white;
margin: auto;
width: 100%;
}
#advisory ul li {
margin-bottom: 2%;
}
.center {
text-align: center;
}
.center1 {
text-align: center;
color: green;
font-size: 28px;
}
.tpoint {
font-size: 24px;
color: orange;
}
<div class="container">
<div id="subnav">
<ul>
<li> Sam </li>
<li> Sam </li>
<li> <a class="active" href="#">Corn </a></li>
<li> Sam </li>
<li> Sam </li>
<li> Sam </li>
<li> Sam </li>
</ul>
</div>
<div class="top">
<div class="topa">
<img src="ham.jpg" width="209" height="205" alt="Picture of kid" />
<img src="bacon.jpg" width="209" height="205" alt="Picture of kid\" />
</div>
<div class="topb">
<h2> Sams </h2>
<p>Sample sentence this Sample sentence this Sample sentence this Sample sentence this
Sample sentence this Sample sentence this Sample sentence this Sample sentence this
Sample sentence this Sample sentence this Sample sentence this Sample sentence this
Sample sentence this Sample sentence this Sample sentence this Sample sentence this
Sample sentence this Sample sentence this Sample sentence this Sample sentence this
Sample sentence this Sample sentence this Sample sentence this Sample sentence this
Sample sentence this Sample sentence this Sample sentence this </p>
</div>
</div>
<hr class="style1">
<div class="bottom">
<div class="sam">
<p class="center1"> Cola </p>
<p class="center tpoint"> Sample </p>
<ul>
<li> Sample
<ul>
<li> Sample </li>
<li> rsam </li>
</ul>
</li>
<li> san
<ul>
<li> sam </li>
<li> sam </li>
</ul>
</li>
<li> sam
<ul>
<li> sam </li>
<li> sam </li>
</ul>
</li>
<li> sam
<ul>
<li> sam </li>
<li> sam </li>
</ul>
</li>
<li> sam
<ul>
<li> sam </li>
<li> sam </li>
</ul>
</li>
</ul>
<p class="center tpoint"> The sam</p>
<ul>
<li> sam
<ul>
<li> sam </li>
</ul>
</li>
<li> sam </li>
<li> sam </li>
<li> sam </li>
<li> sam </li>
<li> sam </li>
<li> sam </li>
<li> sam </li>
</ul>
<p class="center tpoint" > Eggs </p>
<ul>
<li> sam
<ul>
<li> san </li>
</ul>
</li>
<li> Eri
<ul>
<li> Sam </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
The hr is inside .sam div which is not getting full width. That is why you are seeing the hr with small width (but it is taking 80% width).
.sam{
width:100%
}
This will fix the issue.
try it
<hr align="left" width="50%">
You have mistake in the markup
If you want horizantal line 100% width
change <hr class="style1"> to <hr class="style1"/>
This fixes it
I'd like to put the RED button to the right, like I would do using floats in the past
Fiddle: http://jsfiddle.net/vb61r4uL/
.container {
height: 100%;
width: 100%;
background-color: yellow;
display: flex;
align-items: center;
justify-content: center;
}
ul, li {
list-style: none;
padding: 0px;
}
#list {
width: 300px;
background: grey;
}
.item {
display: flex;
align-items: center;
justify-content: flex-start;
}
.destory-button {
background:red;
justify-content: flex-end;
}
<div class="container">
<ul id="list">
<li>
<div class="item">
<input type="checkbox">
Title
<button class="destory-button">Destroy</button>
</div>
</li>
<li>
<div class="item">
<input type="checkbox">
2nd Title
<button class="destory-button">Destroy</button>
</div>
</li>
<li>
<div class="item">
<input type="checkbox">
3rd Title
<button class="destory-button">Destroy</button>
</div>
</li>
</ul>
</div>
How do I make the button align to the right?
Add this style:
.destory-button {
margin-left: auto;
}
Reference: http://www.w3.org/TR/css3-flexbox/#auto-margins
.container {
height: 100%;
width: 100%;
background-color: yellow;
display: flex;
align-items: center;
justify-content: center;
}
ul, li {
list-style: none;
padding: 0px;
}
#list {
width: 300px;
background: grey;
}
.item {
display: flex;
align-items: center;
justify-content: flex-start;
}
.destory-button {
background:red;
justify-content: flex-end;
margin-left: auto;
}
<div class="container">
<ul id="list">
<li>
<div class="item">
<input type="checkbox">
Title
<button class="destory-button">Destroy</button>
</div>
</li>
<li>
<div class="item">
<input type="checkbox">
2nd Title
<button class="destory-button">Destroy</button>
</div>
</li>
<li>
<div class="item">
<input type="checkbox">
3rd Title
<button class="destory-button">Destroy</button>
</div>
</li>
</ul>
</div>