How to set equal padding between elements set with display: flex and justified-content?
ul {
background-color: #ddd;
list-style-type: none;
padding: 0;
display: flex;
justify-content: space-around;
}
li.active a {
background-color: #111;
color: #fff;
}
<ul>
<li>Apples</li>
<li class="active">Bananas</li>
<li>Coconut</li>
<li>Apples</li>
<li>Kale</li>
<li>Coconut</li>
<li>Kale</li>
<li>Kale</li>
<li>Coconut</li>
<li>Kale</li>
</ul>
Bootply example
It is about background-color of active link. I would like to have something like in this image:
STEP 1
Allow for an equal distribution of free space among all list items and center the text (as in the image).
Add this to your CSS:
li { flex: 1; text-align: center; }
STEP 2
Enable the anchor element (a) to extend the full width of its container (so the entire li is clickable).
Add this to your CSS:
li a { display: block; }
Revised Demo
Related
let selector = document.querySelector('.activate')
selector.addEventListener('mouseover', function(){
document.querySelector('#hidden-li').classList.remove("hidden")
})
selector.addEventListener('mouseleave', function(){
document.querySelector('#hidden-li').classList.add("hidden")
})
.menu-list{
width: 40%;
margin: 0 auto;
border: 1px solid black
}
.menu-list ul{
display: flex;
flex-shrink: 0;
padding: 0;
justify-content: space-evenly;
list-style-type: none;
flex-wrap: wrap;
margin-bottom: 0;
}
.menu-list ul li{
text-align: center;
flex: 1;
border: 1px solid purple
width: 20%
}
.menu-list ul li a{
font-size: 1.2rem;
text-decoration: none;
color: black;
}
.hidden {
display: none;
}
<div class = "menu-list">
<ul>
<li><a>TEMP1</a></li>
<li><a>TEMP2</a></li>
<li class = "activate"><a>TEMP3</a></li>
<li><a>TEMP4</a></li>
<li><a>TEMP5</a></li>
<li id = "hidden-li" class = "hidden"><a>TEMP6</a></li>
</ul>
</div>
I have a menu list. When you look at it, there will be total 5 li in same line. Now when I mouseover the Temp3, the li Temp6 will be shown. However no matter how I tried I cannot get the thing display in new line. The flex container always shrink the size of other li. I have tried to set flex-shrink to zero, make sure flex-wrap is enabled, width: 20%; How else I can try to solve my problem?
As far as i understand, you want to keep the first 5 elements on the same line and the 6th elememt on a new line... In order to do that, you need to set "display" to "inline" instead of "flex" and for the last element you need to set "display" to "block", in that way you can achieve the desired output...
The following is a simplified css example:
ul li {
display:inline;
color:red;
}
ul li:last-child {
display:block;
color:green;
}
So the last element will have a style of either "display:none" or "display:block"
I am trying to create a navigation menu with a total of 5 link to other pages.
I cannot figure out how to make the text span from one end to the other, so it takes the whole width of the page, and in the same time is flexible.
The structure is very simple:
ul {
display: flex;
justify-content: center;
width: 100%;
}
ul li {
display: inline-block;
text-align: center;
flex: 1;
justify-content: space-between;
}
ul li a {
display: inline-block;
width: 100%;
font-size: 16px;
font-weight: 300;
color: #070707;
}
<ul>
<li>Contact us</li>
<li>Delivery</li>
<li>About us</li>
<li>Terms & Conditions</li>
<li>Returns</li>
</ul>
This works, but as the text is centered inside every li element, there is some space on the left and on the right. I am trying to make the text "touch" the edges of the ul element (which takes 100% width of the parent element). So if the ul element has a width of 1240px, I am trying to make the text take up 1240px, from end to end.
This is what it looks like when I did the page mockup in photoshop:
the blue lines are the edges (with one indicating the middle).
When I use the flexbox code I wrote, it appears like this:
Is there a way to make this appear like I originally wanted it?
Remove flex: 1 from the li. You do not want the elements to grow as this will prevent the text from reaching the extremities.
Add justify-content: space-between; to the ul. You are currently centering the elements which will cause them to bunch together.
You also need to remove the default ul padding, but presumabaly you are doing this already.
body {
outline: 1px dashed lightBlue;
}
ul {
display: flex;
justify-content: space-between;
width: 100%;
padding: 0;
}
ul li {
display: inline-block;
outline: 1px solid orange;
}
ul li a {
display: inline-block;
width: 100%;
font-size: 16px;
font-weight: 300;
color: #070707;
}
<ul>
<li>Contact us</li>
<li>Delivery</li>
<li>About us</li>
<li>Terms & Conditions</li>
<li>Returns</li>
</ul>
Keep your flexbox code and use justify-content: space-between;, so your items will be like this:
Just don't forget to make sure your flexbox direction is set to "row".
Just an extra tip: Since you are doing a navigation bar, don't forget to use the <nav> tag for better html semantics and accessibility.
http://html5doctor.com/nav-element/
The CSS in this codesandbox returns what you seem to want (it uses React, but for the CSS : https://codesandbox.io/s/wandering-sound-1cme5
The key points I see :
setting body's margin to 0. As a general rule, to ensure consistent styling across browsers, you might want to use a normaliser tool like this: https://necolas.github.io/normalize.css/, or a complete reset like this : https://meyerweb.com/eric/tools/css/reset/ to take care of that kind of baseline styles.
removing the text-align: center. They are not needed if you use justify-content: space-between
only use justify-content: space-between on the flex wrapper (ul)
reset the default padding of ul by setting padding-left: 0
The styles on the li are mostly unnecessary, afaik, and only list-style: none; should be needed for your purpose.
List elements have indentation to make room for markers.
ul {
display: flex;
}
ul li {
text-align: center;
flex: 1;
}
ul li a {
font-size: 16px;
font-weight: 300;
color: #070707;
}
<ul>
<li>Contact us</li>
<li>Delivery</li>
<li>About us</li>
<li>Terms & Conditions</li>
<li>Returns</li>
</ul>
Remove the default space on the list elements. (Also, a lot of your code isn't necessary.)
ul {
display: flex;
/* new */
list-style: none;
margin: 0;
padding: 0;
}
ul li {
flex: 1;
/* for demo */
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border: 1px dashed black;
}
ul li a {
font-size: 16px;
font-weight: 300;
color: #070707;
}
<ul>
<li>Contact us</li>
<li>Delivery</li>
<li>About us</li>
<li>Terms & Conditions</li>
<li>Returns</li>
</ul>
Even better, clean up the HTML, as well. Get rid of the list elements and use the simpler and semantically valuable nav element.
nav {
display: flex;
}
a {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: #070707;
border: 1px dashed black;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
<nav>
Contact us
Delivery
About us
Terms & Conditions
Returns
</nav>
In first image was taken from IE, its having full width for every content, but if u see in second image last menu content, not taking full width. how to solve this in both browser
HTML:
<div class="menu-section clearfix">
<div class="menu-element clearfix">
<ul>
<li class="active">Home</li>
<li>about us</li>
<li>administration</li>
<li>academics</li>
<li>research</li>
<li>activities</li>
<li>examination</li>
<li>facilites</li>
<li>contact us</li>
</ul>
</div>
</div>
CSS:
.menu-section {
background-color:#900000;
height: 56px;
}
.menu-element {
background-color: #400;
height: 50px;
}
.menu-element li {
float:left;
}
.menu-element li:hover {
background-color:#900000;
}
.menu-element li.active {
background-color:#900000;
}
.menu-element li a {
color:#fff;
text-transform:uppercase;
display: block;
padding: 18px 21px;
text-decoration:none;
font-weight: bold;
}
You need to add style to the ul as well:
.menu-element > ul {
list-style: none;
margin: 0; padding: 0;
}
Maintaining consistency across browsers is bit difficult, but you could ensure same rendering by two methods.
Specify a valid doctype on your html to ensure standards mode, and
Specify a box-sizing typically border-box in your stylesheet.
-
* {
box-sizing: border-box;
}
If you want to justify the menu options across the width, then you will have to make a few adjustments and a hack.
Apply a fixed width to the wrapping div, text-align:justify on the ul and display:inline-block on li are required.
Note 1: The display: inline-block is required, however it generates html white-spaces. In order to get rid of those white-spaces, html comments can be used in the markup of list items.
Note 2: The :after pseudo element in the hack is what seems to do the trick. However, that will create an unintended space below the ul. This space seems to be there because the elements are flushed across. If not justified, then this space does not appear.
.menu-element {
width: 100%; /* fixed width required on wrapping container */
}
.menu-element > ul {
list-style-type: none; /* getting rid of bullets */
margin: 0px; padding: 0px; /* getting rid of default indents */
text-align: justify; /* important to justify contents */
}
.menu-element li {
display: inline-block; /* required. float won't work. */
text-align: left; /* to properly align list items */
white-space: no-wrap; /* to prevent wrapping of list items if required */
}
.menu-element > ul:after {
/* this is the hack without which the list items won't get justified */
content:''; display: inline-block; width: 100%; height: 0;
}
Demo: http://jsfiddle.net/abhitalks/mv7qnfLe/4/
Full Screen Demo: http://jsfiddle.net/abhitalks/mv7qnfLe/4/embedded/result/
.
Try this:-
.menu-element ul {
padding: 0;
}
Try This
Give some width to ul element and add this style rule in your css:
.menu-element ul {
clear: both;
list-style:none;
margin: 0 auto;
text-align: center;
width: 92%;
}
I hope it works for you.
How to grow the li elements in the way, that all the four li elements consume the complete 900 pixels space and add a little gap between the elements. And why is there already a gap now - I have none defined?
<html><head><title></title></head>
<style type="text/css">
#box { width: 900px; border: solid 1px black; }
#menu {
display: block;
position: relative;
width: 900px;
margin: 0;
padding: 0;
text-align: center;
}
#menu li {
display: inline;
position: relative;
margin: 0;
padding: 0;
}
#menu li a, #menu li a:visited {
display: inline-block;
position: relative;
padding: 10px;
background-color: yellow;
text-decoration: none;
}
#menu li a:hover, #menu li a:active {
background-color: green;
text-decoration: none;
color: white;
}
</style>
<body>
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li>
<li>OpenOffice</li>
<li>Microsoft Office Visio</li>
<li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
</body>
</html>
Inline blocks behave weirdly in the fact that they render whitespace. The gap shown between items is the new line characters in your code. You can either remove the new line characters as I have shown in the code below (or at this fiddle http://jsfiddle.net/UyQEK/). If you want to keep the HTML clean, and not have to do this removal of whitespace, use float left on the elements instead of display: inline-block and do a clearfix on the parent to set the height.
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li><li>OpenOffice</li><li>Microsoft Office Visio</li><li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
EDIT
Made the classic mistake of forgetting to check to ensure I answered the whole question. I have updated the fiddle http://jsfiddle.net/UyQEK/1/ to show the actual answer to utilize the entire bar rather then just get rid of your spaces. The basis of the solution was floating the elements and giving them each a width of 25% and applying a clearfix to the ul element.
Hope that solves the whole thing this time.
I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?
#nav {
background-color: #181818;
margin: 0px;
overflow: hidden;
}
#nav img {
float: left;
padding: 5px 10px;
margin-top: auto;
margin-bottom: auto;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0px;
background-color: #181818;
float: left;
}
#nav li {
display: block;
float: left;
padding: 25px 10px;
}
#nav li:hover {
background-color: #785442;
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
<div id="nav">
<img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
<ul>
<li>One1</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<div>
<h2>Heading</h2>
</div>
Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.
Define your anchor tag css property as:
{display:block}
Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list.
Make the anchor tag contain the padding rather than the li. This way, it will take up all the area.
Super, super late to this party, but anyway: you can also style the anchor as a flex item. This is particularly useful for dynamically sized/arranged list items.
a {
/* This flexbox code stretches the link's clickable
* area to fit its parent block. */
display: flex;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
}
(Caveat: flexboxes are obvs still not well supported. Autoprefixer to the rescue!)
Use following:
a {
display: list-item;
list-style-type: none;
}
Or you could use jQuery:
$("li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
You should use this CSS property and value into your li:
pointer-events:all;
So, you can handle the link with jQuery or JavaScript, or use an a tag, but all other tag elements inside the li should have the CSS property:
pointer-events:none;
Just simply apply the below css :
<style>
#nav ul li {
display: inline;
}
#nav ul li a {
background: #fff;// custom background
padding: 5px 10px;
}
</style>
here is how I did it
Make the <a> inline-block and remove the padding from your <li>
Then you can play with the width and the height of the <a> in the <li>
Put the width to 100% as a start and see how it works
PS:- Get the help of Chrome Developer Tools when changing the height and width
If you have some constraint where you need to keep <li> structure as is and would like your a tag to take up the full area within the li element you can do the following:
a {
display: flex !important;
width: -webkit-fill-available;
height: -webkit-fill-available;
justify-content: center;
align-items: center;
}
Put the list item within the hyperlink instead of the other way round.
For example with your code:
<li>One</li>