I would like to have an element that grow and reduce to the dimension of its content only with css rules.
Here an example:
ul {
list-style: none;
padding: 1rem 1rem 1rem 0;
background-color: lightblue;
max-height: 300px;
display: inline-flex;
flex-flow: column wrap;
align-items: flex-start;
width: 238px;
}
ul li {
width: 100px;
border: 1px solid red;
margin-left: 1rem;
}
/* HTML */
<ul>
<li>item</li> // repeated n times
</ul>
https://codepen.io/mt_dt/pen/GRJYaNj?editors=1100
It should be something like that:
https://ibb.co/6wmYkGX
If you want to have each element on the list to be as wider as the ul element, you need to remove hardcoded height and flex properties (they have no use) from the ul element and set width: 100%; on the lis:
ul {
list-style: none;
padding: 1rem 1rem 1rem 0;
background-color: lightblue;
width: 235px;
}
ul li {
width: 100%;
border: 1px solid red;
margin-left: 1rem;
}
Have a look to this codepen. Hope it helps!
Related
I have a flexbox navbar using ul with a height of 86px. I centered
the li-s using align-items: center, but when I want to add a
background-color hover effect on the list items, having the same
the height as the ul, the list items just jump to the top of the ul and
it's no more centered...Why's that? I applied display flex on the
li-s using align-items center and this way was okay, but I know this isn't the right way to do it, because you need to apply flex on
parent elements...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: 0 auto;
list-style-type: none;
height: 86px;
background-color: beige;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
gap: 15px;
}
ul li {
height: 86px;
}
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>FAQ</li>
</ul>
</body>
Just remove height from both the element if you want li to take full width of the navbar and adjust its width as per the padding. This is the normal and I guess a good approach to do this.
Your code was just adding height hence text inside it went up. Remove it and add some padding to li
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: 0 auto;
list-style-type: none;
background-color: beige;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
gap: 15px;
}
ul li {
padding: 20px 20px;
}
ul li:hover {
background: tomato;
}
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>FAQ</li>
</ul>
</body>
If I'm understanding the question correctly, I think you need to remove the height set for both the ul and li elements and add appropriate padding to the ul element, so this would be the entire css:
* {
margin: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: auto;
list-style-type: none;
background-color: beige;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
gap: 15px;
padding: 43px 0;
}
I ran this locally and got a vertically and horizontally centered chunk of li items.
You Set height:86px to your li elements and that is causing the problem
you can increase their height using padding-top and padding-bottom or not to add any height to li elements and just let the align-items to work
IF
li heights is a must you can set line-height to them as well
li{
height:86px;
line-height: 86px;
}
here in this fiddle I've just removed li heights and it's working
When aligning li flex items on the y-axis I would use display: flex; on both the ul and li. Then just simply add height: 100%; to your li's for the background-color to cover the full height and you are good to go.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: 0 auto;
list-style-type: none;
height: 86px;
background-color: beige;
}
ul,
li {
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
li {
height: 100%;
}
li:hover {
background-color: pink;
}
li:nth-child(2):hover {
background-color: lightgreen;
}
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>FAQ</li>
</ul>
</body>
I have an ul container and li menu items. Container is 100% width and li items are 50% width of the parent element. Parent is set to display flex and flex direction is column. Now the items are half the width of the flex parents but when I set the child items to flex-grow: 1 nothing seems to be happening at all.
menu-secondary-container ul {
display: flex;
flex-direction: column;
}
#menu-secondary li {
box-sizing: border-box;
font-size: 13px;
border: 1px solid white;
line-height: 2.3;
width: 50% !important;
padding: 0;
flex-grow: 1;
}
I want two items to be in one row and total of two rows.
As I commented above you need to fix your code like this in order to have 2 items per row:
ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
box-sizing: border-box;
font-size: 13px;
border: 1px solid #000;
line-height: 2.3;
flex: 0 1 50%; /* Or flex-basis:50% Or width:50% */
padding: 0;
}
<ul>
<li>aaaa</li>
<li>bbb</li>
<li>cccc</li>
<li>ddd</li>
</ul>
So I seem to be having an issue with the hover feature. When my screen is full size, I can hover my mouse over a menu option and the entire background color changes. However, when I resize my screen, only a portion of the background color changes. I see this upon screen resize:
Screen Resize Issue
Here is the HTML code
<nav>
<ul>
<li>Home</li>
<li>Getting Started</li>
<li>How Do Plants Thrive?</li>
<li>Common Problems</li>
<li>Great Indoor Plants</li>
<li>References</li>
</ul>
<nav>
And the css
nav {
width: 100%;
background: #003300;
border: 1px solid #ccc;
border-right: none;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
border-left: .5% solid #fff;
border-right: .5% solid #ccc;
width: 16.6667%; /* fallback for non-calc() browsers */
width: calc(100% / 6);
box-sizing: border-box;
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: white;
padding: 10px 0;
}
nav ul li a:hover {
background-color: #00b300;
width:100%;
}
.currentlink {
background: #00b300;
}
Thanks in advance for any help you can provide!
By testing your code it appears the issue is that your list items are assigning their height based on their content. As such, when you resize your window, forcing the text in one or more of your list items to wrap, the list items with the wrapped text grow taller than those with less or no wrapped text.
One possible solution, depending on how you wish to style your nav, is to utilize CSS' flex styling. For your CSS, try the following:
nav {
border: 1px solid #ccc;
border-right: none;
}
nav ul {
background: #003300;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
justify-content: space-around;
list-style: none;
margin: 0;
padding: 0;
-webkit-flex-flow: row wrap;
}
nav ul li {
border-left: .5% solid #fff;
border-right: .5% solid #ccc;
box-sizing: border-box;
font-weight: bold;
padding: 5px;
text-align: center;
width: 16.6667%;
/* fallback for non-calc() browsers */
width: calc(100% / 6);
}
nav ul li:first-child {
border-left: none;
}
nav ul li:hover {
background-color: #00b300;
}
nav ul li a {
color: white;
text-decoration: none;
}
.currentlink {
background: #00b300;
}
For your HTML, because we can't assign a height to the <a>, move class="currentLink" to the <a>'s parent <li> so it looks like the following:
<li class="currentlink">Home</li>
To see it all in action, check this jsfiddle.
It happens because your third a text wraps on two lines.
As #dmitry suggested, I'd go with flexbox too. Let's make a few modifications.
First thing, we need box-sizing: border-box on our elements and their children
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
Next we want the nav and the ul to be wull width and we apply display: flex; to this last one
nav {
width: 100%;
}
nav ul {
display: flex;
align-items: center;
width: 100%;
}
Last thing, we need our a to cover full height;
nav ul li a {
height: 100%;
}
Have a look on this fiddle.
I' trying to create a nav that's responsive but I can't get then menu items to stretch itself relative to the container.
What's the most effective modern method of making all elements auto fit themselves full width of a container?
nav {
border: solid 1px #000;
width: 700px;
}
ul {
width: 100%;
list-style-type: none;
width: 100%;
}
ul li {
padding: 25px;
display: inline-block;
background: #000;
color: #fff;
}
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</nav>
I would use CSS tables as follows.
For ul, use display: table and zero out the margin and padding, and set width to 100%.
For ul li, use display: table-cell.
The table cells will adjust themselves to the width of the parent in a reasonable fashion taking into account the width of the link text/labels.
Note: I assumed that you want the links to be inline such that all the links fill up the width, as opposed to a single link taking up 100% of the width. Otherwise, change display: inline-block to display: block for the li elements, but since that is too obvious, I assumed that you wanted a horizontal layout.
nav {
border: solid 1px #000;
width: 700px;
}
ul {
width: 100%;
list-style-type: none;
display: table;
margin: 0;
padding: 0;
}
ul li {
padding: 25px;
display: table-cell;
background: #000;
color: #fff;
}
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</nav>
let's say that effective is in the eye of the beholder, but flexbox is quite modern:
nav { display: flex; border: solid 1px #000; width: 700px; }
ul { display: flex; flex-grow: 1; width: 100%; padding: 10px;
list-style-type: none; }
ul li { flex-grow: 1; padding: 25px; margin: 10px;
text-align: center; background: #000; color: #fff; }
see fiddle: http://jsfiddle.net/4dxkk5wr/18/
and this resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and have fun!
If you really want the most modern solution, you could try flexbox layout: http://jsfiddle.net/4dxkk5wr/15/
ul { width: 100%; list-style-type: none; display: flex; padding: 0; }
ul li { width: 100%; padding: 25px; box-sizing: border-box; background: #000; color: #fff; flex-wrap: nowrap; }
Use flexbox! More information. Give the container the CSS:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
and children: flex: 1 0
Example
Here is an updated jsfiddle http://jsfiddle.net/4dxkk5wr/10/
You can use:
box-sizing: border-box;
width:100%;
in the li tag and set the padding to 0 on the ul.
you can use this css
nav {
border: solid 1px black;
width: 100%;
}
ul {
width: 100%;
list-style-type: none;
width:100%;
margin-left: -35px;
}
ul li {
padding: 100px;
display: inline-block;
background: #000;
color: #fff;
}
I made a navbar that supposedly has list items that are evenly distributed along the navbar, although it seems that list items with longer string lengths have a bigger width than others. Is there a way to fix this?
<div id="menu-bar">
<ul>
<li><a href=#>Home</a></li>
<li>Ferrari</li>
<li>Lamborghini</li>
<li>Bugatti</li>
</ul>
</div>
CSS:
* {
margin: 0px;
padding: 0px;
}
#menu-bar {
background-color: #51F069;
width: 100%;
height: 40px;
border-top: 2px solid #8f8f8f;
border-bottom: 2px solid #8f8f8f;
display: table;
}
#menu-bar li {
list-style-type: none;
display: inline-block;
font-family: Ferrari;
display: table-cell;
text-align: center;
}
#menu-bar a {
display: block;
font-size: 25px;
line-height: 40px;
}
#menu-bar ul {
width: 100%;
display: table;
}
This is a default behavior, they're set to display:table-cell. If you look at an HTML table, the cells with longer content will take more space in the table.
Simply set a width to your list-items :
#menu-bar li {
list-style-type: none;
font-family: Ferrari;
display: table-cell;
text-align: center;
width: 25%; /* 100% / 4 li's */
}
Here's a fiddle : http://jsfiddle.net/sa7x258k/1/