I want to create a menu with the width of 100%.
Children width is auto, but i want fixed to parent
And I don't set width of children since their texts has different lengths.
Sample:
I use this CSS but it doesn't work in a desirable way:
#menu a {
padding:10px calc(100% / 5);
}
How do I achieve this?
you can use this trick to do just that
nav {
width: 100%;
}
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
flex-grow: 1;
text-align: center;
}
nav ul li a {
display: block;
}
Read full article to better understand it responsive fluid width variable item navigation css
Set this to the parent :
.parent{
display:flex;
}
Set this to the children:
.children{
flex:1;
text-align:center;
}
Related
Pls how can i display my li elements in a horizontal direction, i want the li element to contain an image and a text that will display on the image, i tried everything but the li element is just displaying vertically
here is my home.page.scss page
ul {
width: 100% !important;
list-style-type: none !important;
margin: auto !important;
overflow-x: auto !important;
white-space: nowrap !important;
}
li{
display: inline !important;
}
.deyDiv{
position: relative;
margin-top:5px;
margin-bottom:5px;
padding-right:2px;
}
.text{
position: absolute;
bottom: 8px;
left: 16px;
}
.iuyE{
border-radius:10px;
}
.news{
width:60%;
height:45%;
}
here's the home.page.html page
<ul >
<li *ngFor="let video of discovrys">
<div class="deyDiv news">
<img class="iuyE" [src]="image">
<h6 class="text">The title of the nese</h6>
</div>
</li>
</ul>
Pls what am i doing that's wrong
You could replace
li {
display: inline !important;
}
with
li {
display: inline-block;
}
Difference b/n them here. Also try to use !important as sparingly as possible.
Working example: Stackblitz
You will be able to do it using flexbox.
ul {
display: flex;
flex-direction: row;
}
li {
flex: 1;
}
.deyDiv {
display: flex;
flex-direction: column;
}
Your approach to the li list is correct using
display: inline;
However inside of every li item you are using a div element which by default uses
display: block;
change the display from the class news to either inline or inline-block,
working code: https://jsfiddle.net/6w5ohxsL/1/
try this:
ul {
display: flex;
}
I am trying to have equal spacing between four different li elements, but I end up with this:
HTML:
<ul><li>Inbox</li></li><li>Drafts</li></li><li>Sent</li></li><li>Trash</li></ul>
CSS:
ul li {
width: 25%;
display: inline-block;
text-align: center;
}
I have tested the CSS and it is working as it should. I think the problem is that the li's don't all have the same amount of letters, so you end up with some weird visual effects. My reason for believing this:
(Equal spacing)
My approach with this issue is to center the li on the ul since the ul will naturally be the same width than the parent.
ul {
/* Use flex boxes to align li items */
display: flex;
justify-content: space-around;
/* Remove default padding from major browsers */
padding: 0;
/* Hide the default decorations for li items */
list-style: none;
}
ul > li {
/* Display the elements in one line */
display: inline-block;
}
Check out this JSFiddle to see it working.
Try this
ul {
width:100%;
margin-left: 0;
margin-bottom: 0
}
li {
list-style-type: none;
display: inline-block;
margin-right: 20px;
}
<ul style="width:100%;height:50px;">
<li>foo</li>
<li>bar foo</li>
<li>bar bar bar bar bar barbarbar</li>
</ul>
I want my li to be horizontally aligned, to fill the ul in width, to have their text as min-width, and if they are too big horizontally for the container to overflow (not go to line).
Any solution ?
You have just add some CSS as shown below
ul{background:#dddddd;}
ul li{
float:left;
list-style:square inside;
padding-right:20px;
line-height:50px;
}
Here is Output.
Demo
you can use flexbox
css
ul {
display: flex;
line-height: 50px;
border: 1px solid red;
flex-wrap: nowrap;
flex-direction: row;
/*justify-content: center; if you want to justify flex elements*/
}
li {
min-width: 100px;
white-space: nowrap;
}
body {
margin:0;
padding: 0;
}
EDIT : min-width for contents of li New Demo
For more on flexbox
I'm trying to get some list items to stretch across a list
This is the relevant code
#navbar ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#navbar li
{
display: inline;
float: left;
width: 33.33%;
}
Here's what it normally looks like:
But sometimes when I leave the page and come back later (not after reloading) this happens:
Setting the individual item width to 33.3% makes it one pixel short and making it 33.333% makes the problem worse...
You could easily achieve this layout using css tables instead. Widely supported and semantically sound.
#navbar ul {
width: 100%;
display: table;
table-layout: fixed; /* makes all cells equal width */
}
#navbar li {
display: table-cell;
}
http://jsfiddle.net/kBnrz/1/
remove padding of parent of "ul"
Just fake it:
#navbar ul li{
width:33%;
}
#navbar ul li:last-child{
width:34%;
}
Also include this style:
* { box-sizing: border-box }
ref: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Suggestion:
#Miro try CSS Flexbox layout, it will help you, but it works only in modern browsers.
CSS Flexbox
The CSS Flexible Box Layout Model, or "flexbox", is one of the specification in CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.
Here is one example
Html
<div class="box">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</div>
StyleSheet
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.box {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: center;
align-items: flex-start;
}
.box div.A {
order:1;
flex: 1 1 auto;
align-self: auto;
min-width: 0;
min-height: auto;
}
.box div.B {
order:2;
flex: 1 1 auto;
align-self: auto;
min-width: 0;
min-height: auto;
}
.box div.C {
order:2;
flex: 1 1 auto;
align-self: auto;
min-width: 0;
min-height: auto;
}
Here is the Demo
This Link will help you.
I want to display the content of the div element in a single row. However the width of the ul element is unknown because it can have a number of child li elements. The h2 would always occupy the rest of the space. each li element has a width of 20px.
It would look something like this:
|----h2------------|li|li|li||
|----h2---------------|li|li||
HTML:
<div>
<h2>name</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
I have found numerous solutions on the internet but not sure which to choose (proper solution vs hacks). browser compatibility is not an issue, it only needs to work on the latest version of chrome.
Update:
There will be multiple rows of div elements and the li elements should align.
The simplest, most compact and straight forward way is to use floats. If you know your elements will be different sizes, but you don't know exactly what they will be, there are 2 completely flexible ways to go about this.
This would be how to do it using display: table:
http://jsfiddle.net/8uTfp/1/
div {
display: table;
width: 100%;
}
h1, ul {
display: table-cell;
vertical-align: middle;
}
ul {
text-align: right;
}
li {
display: inline-block;
}
This would be how to do it using flexbox:
http://jsfiddle.net/8uTfp/
div {
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
ul {
margin-left: auto;
}
li {
display: inline-block;
}
You could float the h2 left, and the ul right.
div h2 { float: left; }
div ul { float: right; }
If the div's height and the list items' height are fixed and known values, you could try the followihg CSS (notice I added css classes):
.container{
height: 30px;
position: relative;
}
.container ul{
padding: 0; margin: 0;
/* Other reset rules here ... */
position: absolute;
top: 0;
right: 0;
}
.container ul li{
display: inline;
float: left;
height: 30px;
/* Other format rules here ... */
}
If you don't specify the div's height, it will be set by the h2 element's metrics, since absolutely positioned elements don't force the layout. I hope this helps.