Demo - how to stretch li elements to parent container height, so they fit all in ul with appropriate height?
I need smth like that:
ul { display: table;}
li { display: table-row;}
Include one line inside the block of stylesheets for li
height: 25%;
Related
I've the following set of li in my DOM. But all them have only a min-width and the width is set to according to the elements inside each li.
Demo : link
parent css
#parent{
width:1024px;
height:90px;
background-color:black
}
what I want is to expand the li elements width to fit the entire width of the parent element. How can I achieve this using css3.
Thank you.
Use text-align: justify; on the #header element.
Then stretch the content to take up 100% width
FIDDLE
#header {
text-align: justify;
}
#header li {
display: inline-block;
}
#header:after {
content: '';
display: inline-block;
width: 100%;
}
One way is display: flex;: http://jsfiddle.net/kCRc3/18/
Another is display: table; http://jsfiddle.net/kCRc3/24/
display: table; may seem more concise, but there are several quirks such as alignment of cell contents that you need to be aware of.
If you set width: 100% to an element with display: block;, which is the case for any li element by default, then it will expand to the size of its parent.
In your example that would be the .header-tile.
Note that width is already introduced in CSS1 and there's no need for any CSS2 or CSS3 rule or setting.
To achieve it, you need to create new class-defining the remaining width i.e
(parent width - all li width = remaining width) and add it to any of <li class="header-tile newWidth">i.e
.newWidth{
width:100px; // this could be the remaining width
}
From your comments i guess that you want all list items in combination fill the width of their parent, not each single one of them (so that there's no remaining space in the ul).
One way of doing this is to set their display behavior to table, like in this fiddle: http://jsfiddle.net/SURzu/
If you don't have to fix the width of the ul, you could also set both ul and li tags to display: inline-block; to achieve this.
You can use css display: [table, table-row, table-cell] to expand elements in container.
Here is JSFiddle.
CSS:
#parent{
width: 1024px;
height: 90px;
background-color: black;
display: table;
}
#header {
display: table-row;
}
.header-tile {
display: table-cell;
}
I am confused by the fact that applying float to li elements seems to mean that the containing ul element has no height. You can see the problem demonstrated in this jsFiddle.
Basically, I would like to create a ul with an arbitrary number of li elements. I would like each li element to have a width of 20%, so I end up with five li elements per line.
I would also like the ul element to have some height, so I can apply a bottom border.
If I use this class on the lis:
.result1 {
width: 20%;
float: left;
}
then the ul has a height of 0. I've seen posts recommending display: inline-block, but if I use this instead:
.result2 {
width: 20%;
display: inline-block;
}
then the ul has height, but there is whitespace between the lis so they break over two lines.
This must be something in the CSS spec that I'm failing to understand. How can I get five elements per line, with height on the containing element?
Add overflow: hidden; to the parent <ul class="results">
Fiddle
Floated elements cause the parent to collapse, you need to clear the parent element.
.results:after {
content: "";
display: table;
clear: both;
}
http://jsfiddle.net/CuCdr/1/
I am having some trouble getting this menu centered.
I tried text-align:center; on the <ul> and margin:auto;.
I'm not sure if I have to float anything, or change the display setting
JSFiddle: http://jsfiddle.net/FQ3mK/
First method: center the container <div> by using text-align:center:
#navcontainer {
text-align: center;
}
Live demo: jsFiddle
Second method: give a fixed width to the container <div> and use margin:auto:
#navcontainer {
width: 600px;
margin: auto;
}
Live demo: jsFiddle
margin:auto works only if you give the container (the <ul) a fixed width.
see: http://jsfiddle.net/FQ3mK/3/
I too was looking into this. I found the best answer here: https://stackoverflow.com/a/17634702/2537445
I think it's the best because it is the most dynamic, cross-browser compatible answer.
As to your particular anchors, you wouldn't be able to use display: block on them.
However, you can apply padding to the left and right of an inline anchor, and padding to the top and bottom of an inline li to give the spacing you need.
#cssmenu ul {
text-align:center;
}
#cssmenu ul li {
display: inline;
}
Here is my page structure;
I have images inside all "li" below. I am trying to align these images inside the li elements. I am trying to do this with setting right and left margin to auto but it is not working.
Here is the css;
#navcontainer ul li
{
display: inline-block;
width:80px;
}
#navcontainer ul li img
{
margin-right:auto;
margin-left:auto;
}
I am sure it is not about accessing the element from css, bcs when I set the width or height or any other thing in the css it is working. But I didnt manage to align it to the center.
If they're inline-block, simply use text-align: center on the parent li elements.
If they're display: block, then you can use margin: 0 auto 0 auto (top,right,bottom left).
It's also worth pointing out that the only valid children of a ul or ol are li elements. Any other content must be wrapped in an li, otherwise the mark-up is invalid, and then the user-agent tries to correct the mark-up when preparing the DOM. And not consistently across the various user-agents.
Using the following mark-up as a demonstration:
<ul>
<li class="inlineBlock"><img src="http://lorempixel.com/100/100/sports" /></li>
<li class="block"><img src="http://lorempixel.com/100/100/nature" /></li>
</ul>
With the following CSS:
li.inlineBlock {
text-align: center;
}
li.inlineBlock img {
display: inline-block;
}
li.block img {
display: block;
margin: 0 auto 0 auto;
}
JS Fiddle demo.
In my dropdown menu some of the text within the LI's is wrapping to a new line.
I want all of them to be 1 line.
I have tried:
ul ul li {width:100%;}
which doesn't work.
The image below shows what I am faced with.
li {
white-space: nowrap;
}
This should stop the wrapping of the text within the li
Place this on your dropdowns ("Tech Consulting"):
{
height: auto;
}
In the case of the issue here, place height: auto; on the dropdowns (ul li ul li).
I am going to guess that your CSS sets a height to the ul li a ("Small Business"). This places the text outside of the defined height.