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;
}
Related
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;
}
I'm just starting to develop in HTML and CSS, and despite reading about the box model I am still having trouble with some of the basics of positioning.
I want to create a header navigation bar with three elements - one to the left of the page, one to the right, and one in the center. I want these elements to be inline with each other.
At the moment, they are represented in HTML like so
<body>
<div class="header">
<ul class="child">
<li id="lodestone">The Lodestone</li>
<li id="mogstation">The Mog Station</li>
<li id="user">User Account</li>
</ul>
</div>
I have then attempted to align them using the 'text-align' property in CSS.
.header {
background-color: #ffd9e7;
border: black;
display: block;
box-sizing: border-box;
}
.header ul {
display: inline-block;
}
.header > ul > li {
display: inline-block;
}
#lodestone {
text-align: left;
}
#user {
text-align: right;
}
#mogstation {
text-align: center;
}
However, instead of the expected result it produces this.
The three items are aligned, next to each other, on the left.
Can anyone recommend what css property I should be using to solve this problem? My research has shown there are ways of using float, but other people recommend against it, and when I try I get issues with the text overflowing off the page.
If you give the ul and lis a width and (100 ul /30 for li s for example) then they should display correctly
.header {
background-color: #ffd9e7;
border: black;
display: block;
box-sizing: border-box;
}
.header ul {
display: inline-block;
width:100%;
}
.header > ul > li {
display: inline-block;
position:relative;
vertical-align:top;
width:30%;
}
#lodestone {
text-align: left;
}
#user {
text-align: right;
}
#mogstation {
text-align: center;
}
<div class="header">
<ul class="child">
<li id="lodestone">The Lodestone</li>
<li id="mogstation">The Mog Station</li>
<li id="user">User Account</li>
</ul>
</div>
I added vertical-align:top; but it's excess to requirements, you could take that out..
Fiddle
Hope this helps
Take a look at CSS Flexbox for a different approach to layout your elements
header{
display: flex;
justify-content: space-around;
}
<header>
<div>A</div>
<div>B</div>
<div>C</div>
</header>
Why not make the li elements a third of the width?
First make the ul 100% width, you'll also need to ensure there's no padding on the right of the ul as it tends to be automatically added by browsers:
.header ul {
display: inline-block;
padding: 0;
width: 100%;
}
Then have each li 33%
.header > ul > li {
display: inline-block;
width: 33%;
}
Style the rest as required
I have a menu that's generated by a plugin, and I need it to span 2 lines instead of 1 like so:
Example:
I Cannot:
I can't wrap certain li in a div/span
I can't add a <br> where I need the break
I Tried:
I tried adding a Pseudo Element to "Happy" with display: block to create a line break, but couldn't get it to work the way I intended
jsFiddle: http://jsfiddle.net/3xy405oj/
Using content: "\A"; white-space: pre; on the after pseudo-element might help you
JSFiddle
Just add a width to the ul :
ul {
width: 40%;
}
To make it pretty, remove text-align center from the li and add it to ul instead.
Then add margin 0 auto to ul to make it pretty :)
ul {
text-align: center;
margin: 0 auto;
}
Fiddle - http://jsfiddle.net/kq03kzwt/
You can do this:
CSS
ul {
width: 40%;
text-align: center;
margin: 0 auto;
padding: 0;
}
li {
display: inline-block;
margin: 0 2%;
text-align: center;
width: 20%;
}
HTML
<ul>
<li>Crazy</li>
<li>Awesome</li>
<li>Smile</li>
<li class="break-after">Happy</li>
<li>Jitter</li>
<li>Cool</li>
<li>Mango</li>
</ul>
DEMO HERE
You can just float all the elements inside the ul and use clear: left.
<ul>
<li>Crazy</li>
<li>Awesome</li>
<li>Smile</li>
<li>Happy</li>
<li class="break">Jitter</li>
<li>Cool</li>
<li>Mango</li>
</ul>
ul {
width: 100%;
text-align: center;
overflow: auto;
}
li {
margin: 0 5px;
float: left;
}
.break {
clear: left;
}
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;
}
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.