I want to place an image between the bullet point and the text in an unordered list, I have tried several ways but the last one closest to the point was this:
<ul>
<li>
<img src="../2/question/img/zeplin.png" alt="zeplin" style="float: left;">
<p>Zeplin</p>
</li>
<br>
<li>
<img src="../2/question/img/dropbox.png" alt="dropbox" style="float: left;">
<p>Dropbox</p>
</li>
</ul>
This is a photo of the goal:
How can I write this?
li img {
height: 50px;
display: flex;
margin-right: 10px;
}
<ul>
<li>
<img src="https://i.picsum.photos/id/103/2592/1936.jpg?hmac=aC1FT3vX9bCVMIT-KXjHLhP6vImAcsyGCH49vVkAjPQ"
alt="zeplin" style="float: left;">
<p>Zeplin</p>
</li>
<br>
<li>
<img src="https://i.picsum.photos/id/1029/4887/2759.jpg?hmac=uMSExsgG8_PWwP9he9Y0LQ4bFDLlij7voa9lU9KMXDE"
alt="dropbox" style="float: left;">
<p>Dropbox</p>
</li>
</ul>
Simply use list-style-image property in your unordered list and put the image url inside url method. Example:
ul {
list-style-image: url('your_image.png');
}
li img, p {
display: inline-block;
}
<ul>
<li><img src="https://i.stack.imgur.com/wlm3P.png"><p>Zeplin</p>
<li><img src="https://i.stack.imgur.com/DgOJ5.png"><p>Dropbox</p>
</ul>
Related
I am trying to make my list horizontally and I saw that I need to type: display:inline; inside style argument but when I tried it, it didn't work. I will attach my code here maybe I did something wrong. thanks for the helpers!
<body style="font-family:Calibri; font-size:20px">
<center>
<img src="Images/Logo.jpg" style ="margin-top:100px; border:5px solid black;" alt="GameReview" title="Game Review"/>
<br />
<br />
<ul style="list-style-type:none; display:inline;">
<li>
Details
</li>
<li>
On me
</li>
<li>
Gallery
</li>
<li>
Links
</li>
<li>
Conatact me
</li>
</ul>
</center>
</body>
this is for a school project.
The inline style needs to be on the li element.
<style>
ul li {
display: inline;
}
</style>
Hello im trying to use a customer image as a list marker through css, this is my code
<li class="unorderedList">
Bread
<ul>
<li> brown </li>
<li> white </li>
</ul>
</li>
<li> Milk </li>
<li> Butter </li>
<li> Onions </li>
<li> Coriander </li>
the image isnt loading onto the webpage as my list marker, this is the css i used.
div.unorderedList { border-style: solid;
padding: 10px; }
li.unorderedList { list-style-image: url('..\images\marker.png');}
I would recommend not to use the list-style-image property. Instead i would use an image tag. Example:
.list-image {
list-style: none;
padding: 0;
}
.list-image li img{
height: 15px;
width: auto;
margin-right: 5px;
}
<ul class="list-image">
<li><img src="https://cdn.iconscout.com/icon/free/png-256/right-1478289-1251141.png" alt=""> brown </li>
<li><img src="https://cdn.iconscout.com/icon/free/png-256/right-1478289-1251141.png" alt=""> white </li>
</ul>
But to answer your question directly. You did not target your list.
li.unorderedList ul would be the solution.
I have this list and I want to show this inline , I use list-inline class, but the result is not true .
I don't know why this happened . Thanks for any answer .
cshtml code :
<ul style="text-align: center; list-style-type: none; vertical-align: top;">
<li>
#foreach (var item in Model.SocialNetworks)
{
<ul class="list-inline" style="text-align:center;list-style-type:none;padding-top:15px;">
<li class="col-xs-3">
<a class="aFooter" href="#item.SocialLink">
<img class="img-responsive center-block socialIcon" src="#Url.Content(item.SocialIcon.ToString())" />
</a>
</li>
</ul>
}
</li>
</ul>
Result :
Remove the padding-top: 15px; at the inside <li> tag.
With running fiddle.
Try float left to li element
ie, li{ float: left;}
This question already has answers here:
Unwanted margin in inline-block list items [duplicate]
(10 answers)
Closed 9 years ago.
So I'm a little stumped. I'm trying to make a page to display images. I want there to be 5 images per row spaced with maximum amount when the window is at max width (~950 px), but I want them to get closer as you make it smaller and then, when there's 0 px between them, there will only be 4 images per row, and that will continue until a specific width. Kind of like Instagram, but I don't want the pictures to get smaller. Here's what I have:
HTML
<ul>
<li>
<img src="0.png">
</li>
</ul>
<ul>
<li>
<img src="1.png">
</li>
</ul>
<ul>
<li>
<img src="2.png">
</li>
</ul>
CSS
ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
ul li
{
display: inline;
}
//the images are also float left, so they are horizontal
Basically, as you can see, I have nothing and I don't really know what to do. I'd appreciate any help. Thanks!
Can you do me a favor and try this fix (I know there is an obnoxious invisible-spacing bug related to lis written on newlines in the HTML, not sure if it applies to UL's in order too but it's worth a shot) --
<ul><li><img src="0.png"></li></ul><ul><li><img src="1.png"></li></ul><ul><li><img src="2.png"></li></ul>
this may get you closer to where you want to go:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
ul {
padding: 0;
margin: 0;
list-style-type: none;
min-width:450px;
}
ul li {
display: inline;
float:left;
width:20%;
}
</style>
</head>
<body>
<ul>
<li> <img src="0.png" width="150" height="50"> </li>
<li> <img src="1.png" width="150" height="50"> </li>
<li> <img src="2.png" width="150" height="50"> </li>
<li> <img src="0.png" width="150" height="50"> </li>
<li> <img src="1.png" width="150" height="50"> </li>
<li> <img src="2.png" width="150" height="50"> </li>
</ul>
</body>
</html>
It is more "proper" markup to put all the images into one list, and opens the door for setting a hard minimum width on the ul but a % on the li... which is what makes the whitespace vary with the window sizing. I am not sure if this gets you all the way there, but hopefully it will help!
Your unordered list should look like this:
<ul><li><img src="0.png"></li><li><img src="1.png"></li><li><img src="2.png"></li></ul>
Super unconventional, but it works.
Fiddle here: http://jsfiddle.net/QMs93/
http://jsfiddle.net/AgLMp/1
CSS
ul {
padding: 0;
margin: 0;
list-style-type: none;
max-width: 950px;
min-width: 600px;
}
ul li {
float: left;
width: 33%;
min-width: 200px;
}
HTML
<ul>
<li>
<img src="http://placehold.it/200x200/ff0000/00ffff&text=Image+1" />
</li>
<li>
<img src="http://placehold.it/200x200/00ff00/ff00ff&text=Image+2" />
</li>
<li>
<img src="http://placehold.it/200x200/0000ff/ffff00&text=Image+3" />
</li>
</ul>
like this? http://jsfiddle.net/fqTsN/
remove the float:left from your pictures by the way! I fixed that too (it's horizontal without float:left;
your best and fastest bet for more control is to use media queries, or you could also use Bootstrap.
As everyone else has said:
<ul>
<li>Stuff</li>
<li> Other Stuff</li>
</ul>
I have a requirement to remove the use of tables and replace the code with HTML lists (<ul> and <li>). The HTML code to be replaced is as below
<table>
<tr>
<td>
<img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" />
</td>
<td>
<table>
<tr><td>John Smith</td></tr>
<tr><td>24 years</td></tr>
<tr><td>Chicago</td></tr>
</table>
</td>
</tr>
</table>
Tried multiple options using lists but could not achieve this display. The text on the right always went below the image using lists, I wanted the vertical text list (name, then age, then city) to be adjacent to the image i.e. the list should produce the same shape as produced by the above table.
Please let me know how this can be done via CSS with HTML lists.
You could try something like this
<style>
.profile li{
float: right;
clear: right;
}
.profile .image{
float: left;
clear: none;
}
</style>
<ul class="profile">
<li class="image"><img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" /></li>
<li>John Smith</li>
<li>24 years</li>
<li>Chicago</li>
</ul>
Here is an example on jsFiddle, which contains your required solution...
http://jsfiddle.net/ZHbxr/16/
You need to mark the parent <ul> display as table and the inner <li> display as table-cell
For this you can use display:table property for this. Write like this:
CSS
.profile > li{
display:table-cell;
}
.profile{
display:table;
}
HTML
<ul class="profile">
<li><img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" /></li>
<li>
<ul>
<li>John Smith</li>
<li>24 years</li>
<li>Chicago</li>
</ul>
</li>
</ul>
Check this http://jsfiddle.net/GCfSx/1/