This question already has an answer here:
Proper use of flex properties when nesting flex containers
(1 answer)
Closed 2 years ago.
i'm having trouble with this code.I need to move those images horizontal... I don't know why they are placed vertical.
Image
.almedio {
display: flex;
justify-content: center;
}
<div class="almedio">
<ul>
<li></li>
<li><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></li>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></li>
<li><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></li>
</ul>
</div>
Be sure you are styling the ul and li tags, not only the container.
.almedio {
width: 100%;
}
ul {
list-style: none;
}
li {
display: inline-block;
}
<div class="almedio">
<ul>
<li></li>
<li><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></li>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></li>
<li><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></li>
</ul>
</div>
you just need to add
.almedio>ul{
display: flex;
}
.almedio{
display: flex;
justify-content: center;
}
.almedio>ul{
display: flex;
}
.almedio>ul>li{
padding:5px;
}
<div class="almedio">
<ul>
<li></li>
<li><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></li>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></li>
<li><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></li>
<li><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></li>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></li>
<li><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></li>
</ul>
</div>
You can use css flex or grid -
/*.almedio {
display: flex;
justify-content: center;
}*/
.almedio ul{
padding:0;
margin:0;
display:flex;
overflow-X:scroll;
list-style-type:none;
}
.almedio ul li{
padding:2px 10px;
}
img{
height:100%
}
<div class="almedio">
<ul>
<li></li>
<li><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></li>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></li>
<li><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></li>
</ul>
</div>
Related
I want to put multiple <ul> on the same line, simulating products in a shop. So far I've got multiple unordered list tags:
ul {
display: inline;
}
li {
list-style: none;
}
<ul>
<li><img src="http://au.alexu.edu.eg/English/Academics/PublishingImages/Central%20Library%20Logo%20Design%20-%20English.png" width="20%" height="20%" /></li>
<li>Name</li>
<li>Author</li>
</ul>
<ul>
<li><img src="http://au.alexu.edu.eg/English/Academics/PublishingImages/Central%20Library%20Logo%20Design%20-%20English.png" width="20%" height="20%" /></li>
<li>Name</li>
<li>Author</li>
</ul>
How can I accomplish this? I have them show vertically but I dont want them this way.
You could set it to ul {display:inline-block;}.
Be aware of width="20%" height="20%" on the image in your example, it may give you unwanted results. As percentage width or height is always relative to container's width, not itself.
For simplicity, I just use fixed width in the demo below.
ul {
display: inline-block;
vertical-align: top;
padding-left: 0;
}
li {
list-style: none;
}
<ul>
<li><img src="//dummyimage.com/100"></li>
<li>Name</li>
<li>Author</li>
</ul>
<ul>
<li><img src="//dummyimage.com/100"></li>
<li>Name</li>
<li>Author</li>
</ul>
Use CSS:
li{
float:left;
}
floating left will fix it..
i have a unordered list that displays a link and an image, and i want to display them inline. i have used the following:
<ul>
<li><img src="www."/>Link one
<li><img src="www."/>Link two
<li><img src="www."/>Link three
</ul>
in the css i have put:
li {
display: inline;
margin: 0 10px;
}
but the list is still showing one item per line
Close the li tags
<style>
li {
margin: 0 auto;
position: relative;
float: left;
display: inline;
}
</style>
<ul>
<li><img src="www."/>Link one</li>
<li><img src="www."/>Link two</li>
<li><img src="www."/>Link three</li>
</ul>
i found the answer was to change it to display: inline-block;
hope this helps others.
Try this
li {
float: left;
width: 100px; /*your width*/
margin: 0 10px;
}
Close your li's and use , its working as expected
<ul>
<li><img src="www."/>Link one</li>
<li><img src="www."/>Link two</li>
<li><img src="www."/>Link three</li>
</ul>
I'm trying to create a drop down menu, however I'm having difficulty "hiding" the nested menu items. The links and styling work fine, it's just the drop-down effect that I've missed something on. Ideas?
jsfiddle
css-
#header .social {
float: right;
list-style: none;
padding-top: 20px;
}
#header .social ul li {
display: inline;
position: relative;
}
#header .social ul li ul {
display: none;
}
#header .social ul li a {
display: inline;
padding-left: 6px;
white-space: nowrap;
}
#header .social ul li:hover ul {
display: inline;
position: absolute;
}
#header .social ul li:hover li {
float: none;
}
html/php-
<div class="social">
<ul>
<li><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="cait and shannon barker instagram" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
<li><img src="<?php bloginfo('template_url');?>/img/youtube.png" alt="cait and shannon barker youtube" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
<li><img src="<?php bloginfo('template_url');?>/img/facebook.png" alt="cait and shannon barker facebook" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
<li><img src="<?php bloginfo('template_url');?>/img/twitter.png" alt="cait and shannon barker twitter" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
<li><img src="<?php bloginfo('template_url');?>/img/pinterest.png" alt="cait and shannon barker lockerz" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
</ul>
</div><!-- end social -->
Is this what you are looking for ? http://jsfiddle.net/cScrD/3/
The HTML structure was not standard (ul should not be ideally put as a child of another ul. Rather open an li tag and put the ul inside the li). The structure should ideally be like this.
<div id="header">
<div class="social">
<ul>
<li><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="cait and shannon barker instagram" /><!-- li should not end here -->
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
</li><!-- li should end here -->
</ul>
</div>
</div>
I am trying to design a web-page where I have a list of bands, and every image will be a small set picture of the band logo(or something). I am setting the style inline and I have tried vertical-align and line-height etc and nothing seems to work.
I am pretty sure I could accomplish this with tables but I have been told many times that is not the proper use of the table.
<div id ="Content">
<ul>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
</ul>
</div>
Here is the small amount of CSS I have
#content li{display:inline;}
img {
max-height:100px;
max-width: 100px;
}
#content ul{list-style-type: none;
clear:left;
}
Any help or tips would be greatly appreciated
If I understood what you're trying to do, try this:
#content li {
display: inline-block;
background-color: #eaeaea;
border: 1px solid red;
text-align: center;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
margin: 5px;
}
img {
max-height:100px;
max-width: 100px;
display: block;
}
#content ul{
list-style-type: none;
clear:left;
}
Have a look at it here: http://jsfiddle.net/zDhKQ/
My best guess is that you are looking for this:
#content ul li {
float:left;
}
otherwise you'd have to be a bit more specific on what you are trying to accomplish.
I believe you want the align tag. Something like this:
<li><img src="IMG_3117.jpg" alt="Smiley face" width="42" height="42" align="left">This is some text.
</li>
Will result in something that looks nice.
I'm building a website for a friend and it's quite image heavy, I've sliced up the image into relevant bits but I've deciding to use divs and not make use of tables. So this is what I've got:
The Html
<body>
<div id="container">
<div id="header">
<img src="images/header1280.jpg" />
</div><!--end header-->
<div id="nav">
<ul>
<li><img src="images/mixes.jpg" /></li>
<li><img src="images/events.jpg" /></li>
<li><img src="images/artists.jpg" /></li>
<li><img src="images/christ.jpg" /></li>
<li><img src="images/links.jpg" /></li>
<li><img src="images/contact.jpg" /></li>
<li><img src="images/hos.jpg" /></li>
<li><img src="images/forum.jpg" /></li>
<li><img src="images/news.jpg" /></li>
<li><img src="images/fun.jpg" /></li>
<li><img src="images/shop.jpg" /></li>
<li><img src="images/join.jpg" /></li>
</ul>
</div><!--end nav-->
</div><!--end container-->
</body>
The CSS
html, body, div, img, ul, li, a {
margin: 0;
padding: 0;
border: 0px none;
vertical-align: baseline;
font-size: 100%;
font: inherit;
}
body {
line-height: 1;
background: #000;
}
#container {
margin: 0 auto;
width: 1280px;
}
#header {
width: 100%;
}
#nav ul li a img {
width: 100%
height: auto;
}
#nav ul {
list-style: none;
width: 100%;
}
#nav ul li {
float: left;
}
Now there are 12 image links in all and they span over 2 lines. So imagine You have this:
HEADER
NAV LINE 1
NAV LINE 2
on Chrome a 2px gap is created between the header & the NavLine1 & between Navline1 & Navline2. This can be eliminated by:
li {margin-top: -2px;}
On firefox 3.6 there is instead a 3px gap between the Header & Navline1 & just a 2px gap between NavLine1 % Navline 2.
On IE8 there is instead a 2px gap between the Header and Navline1 but a 3px gap between Navline1 and Navline2.
I'm a little confused as to whats causing this, is it a float bug? But can anyone shed some light on the issue?
Use:
#header img, #nav img {
vertical-align: top
}
img elements are inline with a default vertical-align of baseline. The problematic gap is the space reserved for descenders in letters like g or p. Changing vertical-align from baseline removes the gap.