How to center ul li in content without left & right margin.
See what I have and what I need to do:
show image
I must deleted right margins. How can I deleted margin and center li elements without left and right margins?
There's the code:
.content {width:940px;background:gray;}
.content ul {width:100%;padding:0;margin:0;}
.content ul li{width:200px;display:inline-block;margin-right: 30px;}
.content ul li span{display: block;height: 120px;overflow: hidden;}
.content ul li span img{width:100%;}
<div class="content">
<ul>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
</ul>
</div>
Solution 1: Use CSS3 flexbox
If you are willing to support most modern browsers that support the flexbox model, it's actually very simple. These are the new rules you need for the parent <ul> element:
.content ul {
/* Use flexbox */
display: flex;
/* Allow wrapping */
flex-wrap: wrap;
/* Distribute empty space between elements */
justify-content: space-between;
}
.content {
width: 940px;
background: gray;
}
.content ul {
/* Use flexbox */
display: flex;
/* Allow wrapping */
flex-wrap: wrap;
/* Distribute empty space between elements */
justify-content: space-between;
width: 100%;
padding: 0;
margin: 0;
}
.content ul li {
width: 200px;
/* We don't need this:
display: inline-block; */
}
.content ul li span {
display: block;
height: 120px;
overflow: hidden;
}
.content ul li span img {
width: 100%;
}
<div class="content">
<ul>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
</ul>
</div>
Solution 2: Use nth-child to remove right marign
Another solution is to remove the right margin on the last element of each row. In your case, since the images have fixed width, you know that every 4th element is the last one on the row.
So the approach will be:
Use calc() to calculate space-filling margin between the elements on each row
Use float: left instead of display: inline-block because we don't want extraneous whitespace that is present for inline elements
Use overflow: hidden on parent to clear floats
The calc() part is a little complicated, but what you need is:
Calculate the remaining free space after content distribution. In this case, you have 960px - (200px * 4)
Divide this space between the 3 inter-element spaces
This gives you:
calc((960px - (200px * 4)) / 3);
Warning: This solution will not work if you have unknown number of elements per row, e.g. when you have dynamic image sizes, uncertain parent width, and etc.
.content {
width: 940px;
background: gray;
}
.content ul {
width: 100%;
padding: 0;
margin: 0;
/* Clearfix hack */
overflow: hidden;
}
.content ul li {
width: 200px;
/* Use float to position children */
float: left;
/* Calculate appropriate margin to fill space up
1. Take the remaining unoccupied space
2. Divide by number of elements - 1
*/
margin-right: calc((940px - 200px * 4)/3);
}
/* No margin for last item on each row
... which in this case, is every 4th child
*/
.content ul li:nth-child(4n) {
margin-right: 0;
}
.content ul li span {
display: block;
height: 120px;
overflow: hidden;
}
.content ul li span img {
width: 100%;
}
<div class="content">
<ul>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
</ul>
</div>
Related
The Code:
<ul class="site-nav list--inline " id="SiteNav">
<li class="site-nav--active">
<a href="/" class="site-nav__link>
<span class="site-nav__label">HOME</span>
</a>
</li>
**<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">ORDER NOW</span>
</a>
</li>**
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">TRACK ORDER</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">HELP CENTER</span>
</a>
</li>
</ul>
I want to target the SECOND span tag in the list with class: site-nav__label using pure CSS.(nth-child, second-of-type etc.)
I cannot add ids or classes to this span tag.
Help will be greatly appreciated.
For select the second li try with
#SiteNav li:nth-of-type(2)
and then for select the span of second li add span after:
#SiteNav li:nth-of-type(2) span
Because you want inside ul tag, I used ul.site-nav for ul tag with class site-nav
ul.site-nav li:nth-of-type(2) a > span {
border: 3px solid red;
}
<ul class="site-nav list--inline " id="SiteNav">
<li class="site-nav--active">
<a href="/" class="site-nav__link>
<span class="site-nav__label">HOME</span>
</a>
</li>
**<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">ORDER NOW</span>
</a>
</li>**
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">TRACK ORDER</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">HELP CENTER</span>
</a>
</li>
</ul>
To Target the span use a combination of nth-of-type and child combinators
#SiteNav > li:nth-of-type(2) > a > span {
font-weight:bold;
color:red;
}
/*Or Target the span class*/
#SiteNav > li:nth-of-type(2) .site-nav__label {
font-style:italic;
}
<ul class="site-nav list--inline " id="SiteNav">
<li class="site-nav--active">
<!-- Fixed Missing closing " -->
<a href="/" class="site-nav__link">
<span class="site-nav__label">HOME</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">ORDER NOW</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">TRACK ORDER</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">HELP CENTER</span>
</a>
</li>
</ul>
For a good article on nth-child (and nth-of-type) see https://css-tricks.com/useful-nth-child-recipies/
I am using following example and i need to use two title in the page for each item.
<div> div inside li is defined as flex and if i add more than one element it show it as two columns but i want to in two rows and center aligned horizontally & vertically.
If i change the flex to block or other property then title move to top while i want them in center
Not sure how to fix it with minimal css
http://codepen.io/anon/pen/XNqYWd
<ul class="cbp-rfgrid">
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
</ul>
Use flex-direction and justify-content property, like:
.cbp-rfgrid li a div {
flex-direction: column; /* Flex Direction Column */
justify-content: center; /* Vertically Aligns Content (on flex-direction: column) */
}
Have a look at the snippet below (Use full screen):
.cbp-rfgrid {
margin: 35px 0 0 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.cbp-rfgrid li {
position: relative;
float: left;
overflow: hidden;
width: 16.6666667%; /* Fallback */
width: -webkit-calc(100% / 6);
width: calc(100% / 4);
margin:1px;
}
.cbp-rfgrid li a,
.cbp-rfgrid li a img {
display: block;
width: 100%;
cursor: pointer;
}
.cbp-rfgrid li a img {
max-width: 100%;
}
/* Flexbox is used for centering the heading */
.cbp-rfgrid li a div {
position: absolute;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
background: rgba(71,163,218,0.2);
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
flex-direction: column;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
text-align: center;
opacity: 0;
}
.cbp-rfgrid li a:hover div {
opacity: 1;
}
.cbp-rfgrid li a div h3 {
width: 100%;
color: #fff;
text-transform: uppercase;
font-size: 1.4em;
letter-spacing: 2px;
padding: 0 10px;
}
/* Example for media query: change number of items per row */
#media screen and (max-width: 1190px) {
.cbp-rfgrid li {
width: 20%; /* Fallback */
width: -webkit-calc(100% / 5);
width: calc(100% / 5);
}
}
#media screen and (max-width: 945px) {
.cbp-rfgrid li {
width: 25%; /* Fallback */
width: -webkit-calc(100% / 4);
width: calc(100% / 4);
}
}
#media screen and (max-width: 660px) {
.cbp-rfgrid li {
width: 33.3333333%; /* Fallback */
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}
}
#media screen and (max-width: 660px) {
.cbp-rfgrid li {
width: 33.3333333%; /* Fallback */
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}
}
#media screen and (max-width: 400px) {
.cbp-rfgrid li {
width: 50%; /* Fallback */
width: -webkit-calc(100% / 2);
width: calc(100% / 2);
}
}
#media screen and (max-width: 300px) {
.cbp-rfgrid li {
width: 100%;
}
}
<ul class="cbp-rfgrid">
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
</ul>
Hope this helps!
I am trying to make a web page that looks similar to a mobile phones home page. I would like it to reorder the icons depending on the size of the screen.
what I have so far is bellow
ul {
list-style: none;
padding: 0;
}
li {
display: inline-block;
width: 5em;
height: 5em;
padding: 1em;
margin: 1em;
background-color: rgba(20, 20, 20, 0.7);
border-radius: 1em;
}
img {
width: 100%;
height: 100%;
}
<ul>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
</ul>
The problem with this code is that when you resize the window and the list items move to the next line, you can be left with a big gap on the right hand side. Is there a way I can distribute this extra space either by centering the list as whole or between the list items? I would like to avoid centering the icons so I can keep them all aligned both horizontally and vertically.
I change from inline-block to float:left and i move your padding to img
ul {
list-style: none;
padding: 0;
animation: FadeIn 1.3s;
width: 100%;
}
li {
float: left;
background-color: rgba(20, 20, 20, 0.7);
border-radius: 1em;
width: 13.42%;
}
ul li:not(:first-child){
margin-left: 1%;
}
img {
width: 82%;
padding: 8%;
}
<ul>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
</ul>
I just copied your code and added media queries. I hope this would help.
CSS Added:
#media only screen and (max-width: 768px) {
ul {
padding: 10%;
}
}
ul {
list-style: none;
padding: 0;
animation: FadeIn 1.3s;
}
li {
display: inline-block;
width: 5em;
height: 5em;
padding: 1em;
margin: 1em;
background-color: rgba(20, 20, 20, 0.7);
border-radius: 1em;
}
img {
width: 100%;
height: 100%;
}
#media only screen and (max-width: 768px) {
ul {
padding: 10%;
margin-top: 0;
}
}
<ul>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
</ul>
I want to add a button background to the "a" without moving its position.
The table B is almost correct except that you move the "a" the right side.
I don't know how to do it.
You also need to take account to the I also need to change the size of the width in the future.
Thanks!
#testtesttesttest {
width: 50px;
background-color: #F1F2F2;
-webkit-border-radius: 20px;
border-width: 1px;
border-color: #47a417;
text-decoration: none;
text-align: center;
padding: 1px 8px;
display: inline-block;
line-height: 21px;
color: white;
font-family: Helvetica,Arial,sans-serif;
}
#testtesttesttest:hover {
background-color: #3D8E14;
}
ul.aa, ul.bb
{
list-style-type: none;
}
Table A:
<ul class="aa">
<li>
<a href="#">
a
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
<br/>
<br/>
Table B:
<ul class="bb">
<li>
<a href="#">
<span id="testtesttesttest">a</span>
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
Try to give negative left margin
#testtesttesttest {
width: 50px;
background-color: #F1F2F2;
-webkit-border-radius: 20px;
border-width: 1px;
border-color: #47a417;
text-decoration: none;
text-align: center;
padding: 1px 8px;
display: inline-block;
line-height: 21px;
color: white;
font-family: Helvetica,Arial,sans-serif;
margin-left:-30px;
}
#testtesttesttest:hover {
background-color: #3D8E14;
}
ul.aa, ul.bb
{
list-style-type: none;
}
Table A:
<ul class="aa">
<li>
<a href="#">
a
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
<br/>
<br/>
Table B:
<ul class="bb">
<li>
<a href="#">
<span id="testtesttesttest">a</span>
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
Setting the span to inline-block doesn't help so change that to inline. Then remove the 8px padding and you're done.
If you want the text to remain in the same place but also keep it centered inside the background, you could shift it back with a CSS transform (equal to width/2 - horizontal padding/2):
#testtesttesttest {
transform: translateX(calc(-50% + 4px));
}
Here's a JSFiddle to show the effect. Try changing around the width, and you'll see the text still stays in the same place. Hope this helps! Let me know if you have any questions.
I have a seemingly simple alignment issue I can't seem to fix. I have a basic menu inside a div. I want to add content underneath the menu, so I created another div with a top-margin of 10px. For some reason, it is not recognizing the content as separate and keeps inserting the content in line with the menu. The information span class is being placed on the same level as the menu. Please let me know if you see a problem with the way these divisions are set up!
The CSS code just has a padding of 10px on the top for the information class.
HTML CODE:
<body>
<div class="content">
<h1 class="title">HOME PAGE</h1>
<img src="pic.jpg" alt="Picture" style="padding:0px 0px 0px 45px"/>
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr"></span>
</span>
</a>
<div class="sdt_box">
EXAMPLE
</div>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
<div class="sdt_box">
EXAMPLE
</div>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr"></span>
</span>
</a>
<div class="sdt_box">
A
</div>
</li>
</ul>
</div>
<div>
<span class="information">
<p>
Some content here
</p>
</span>
</div>
With out seeing your CSS it sounds like a float issue. You need to clear floated elements. Assuming you did them correctly they're most likely on the li tags. You can use overflow:hidden on your parent ul:
ul#sdt_menu{
overflow: hidden;
}
or you can use a cleafix method
ul#sdt_menu:after{
content: '';
display: block;
clear: both;
}
If neither of these work please post your CSS for further help