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>
Related
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>
I'm trying to get a horizontal list formatted so the image is on the left side of the ul. Here's an idea of what I'm aiming for (green is the image, the x,y,z labels are to help refer to portions of each part if it helps):
But I can't seem to figure out how to keep my image 'separate' from the text part of the ul.
HTML:
<span class='row'>
<ul class = 'top-ul'>
<ul id="menu">
<li><h2><u>Colby Abbott</u></h2></li><br>
<li><p id="email">Enos.Goyette#hotmail.com</p></li><br>
<li><p id="phoneNumber">360.751.0915</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
<ul id="menu">
<li><h2><u>Jamaal Powlowski</u></h2></li><br>
<li><p id="email">Stan.Roberts48#gmail.com</p></li><br>
<li><p id="phoneNumber">(057) 629-2042 x2604</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
<ul id="menu">
<li><h2><u>Ubaldo Bode</u></h2></li><br>
<li><p id="email">Alia.Lynch52#gmail.com</p></li><br>
<li><p id="phoneNumber">881.886.7822 x87177</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
<ul id="menu">
<li><h2><u>Herbert Bailey</u></h2></li><br>
<li><p id="email">Arnaldo73#gmail.com</p></li><br>
<li><p id="phoneNumber">1-620-830-6732</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
</ul>
<br>
</span>
<span class='row'>
<ul>
<ul id="menu">
<li><h2><u>Alana Legros</u></h2></li><br>
<li><p id="email">John.Nienow37#hotmail.com</p></li><br>
<li><p id="phoneNumber">299.276.2872 x90430</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
<ul id="menu">
<li><h2><u>Gertrude Jacobs</u></h2></li><br>
<li><p id="email">Erna_Krajcik94#gmail.com</p></li><br>
<li><p id="phoneNumber">(335) 097-2437</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
<ul id="menu">
<li><h2><u>Ellis Homenick</u></h2></li><br>
<li><p id="email">Ezra_Stamm76#yahoo.com</p></li><br>
<li><p id="phoneNumber">(391) 333-5140</p></li>
<li><img src=https://i.imgur.com/9ZC02Oss.jpg ></li>
</ul>
</ul>
</span>
CSS:
ul {
width:100%;
table-layout: fixed;
}
ul ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
table-layout: fixed;
border: 3px red solid;
width:20%;
}
li img{ /* I want to move this to the right of the ul it's in somehow */
display: inline;
border: 3px solid green;
}
p {
margin:0px;
padding-left: 10px;
}
.row{
width: 100%;
}
.row li{
display:inline-block;
}
But it turns out like this.
How could I 'break apart' the image, so the text stays center (or top) aligned, with the image to the right; while also having the border be tighter around each ul?
Edit: I'm new to html/css, so if there's a better way to format this generally, please let me know. Per below, it was mentioned to use a list to do this ...so the above is my attempt but it's likely I'm not thinking of something else that'd be better.
FWIW, I tried doing this as a table, but was recommended to use a list instead
If you really insist on using your semantics, this is the solution I can come up with with the least possible changes in your code.
HTML
<ul class="menu"> #change id to class
<li> #placed all the info you want on the left to a single li element
<h2><u>Colby Abbott</u></h2>
<p id="email">Enos.Goyette#hotmail.com</p>
<p id="phoneNumber">360.751.0915</p>
</li>
<li> #right side
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</li>
</ul>
CSS
ul.menu {
border: 3px red solid;
width: 400px;
}
ul.menu li {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float:left;
}
ul.menu li img{
display: inline;
border: 3px solid green;
float: right;
width: 100px;
}
Then repeat this for all your sections.
Side note: I also removed the <br>s at the end of your li elements because they're unnecessary. I highly suggest reading up on Flexbox because it does exactly what you want.
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 created a navigation bar at for my website using an in-line list and then it has been styled. Each <li> is exactly the same but I want the last one to have a different size as i wish to change the width and padding of it.
I have no idea how I am able to do this, I've tried multiple ways but experienced lots of problems along the way. I tried adding styling in the <li> tag on the HTML page, but it changed absolutely nothing, I then tried using the last-child selector which worked to an extent. It allowed me to change the padding of it but not width. But it didn't just change it for the last one but also the first one.
CSS:
.dropdown{
position: relative;
margin: 0 auto;
float: right;
top: 20px;
font-size: 13px;
}
.dropdown li {
float: left;
width: 155px;
background-color:#373737;
position: relative;
border-bottom:1px solid #575757;
border-top:1px solid #797979;
}
.dropdown li a {
display: block;
padding: 10px 8px;
color: #fff;
position: relative;
z-index: 2000;
text-align:center;
}
.dropdown li a:hover,
.dropdown li a.hover{
background: #CF5C3F;
position: relative;
}
.dropdown :last-child li a{
padding: 0px;
width: 40px;
}
HTML
<ul class="dropdown">
<li><a id="page1" href="index.html">Home</a></li>
<li>Internet Architecture
<ul class="sub_menu">
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Four</li>
</ul>
</li>
<li>Internet Security
<ul class="sub_menu">
<li>Laws</li>
<li>Security Risks</li>
</ul>
<li>Internet Security
<ul class="sub_menu">
<li>Laws</li>
<li>Security Risks</li>
</ul>
</li>
<li>Item One
<ul class="sub_menu">
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ul>
</li>
<li><img src="images/contact_white.png" width="30px" height="auto"></li>
</ul>
Does anyone have any idea on how to fix this?
I want the last one to have a different size as i wish to change the width and padding of it.
So if you meant last child of level 1 than use
ul.dropdown > li:last-child {
/* Target */
}
And if you meant each last child of li on 2nd level ul, than use
ul.dropdown > li > ul > li:last-child {
/* Target */
}
Demo
Demo (Just more elements, nothing fancy)
I may be missing something here, but if I understand your question right it's as simple as giving the <li> you want to be the odd one out an id, and then using css to change li#myId..
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.