How to float two elements in li element without clearing each time - html

I am having a stacked list where I want to float an img (icon) and the text. However, I feel its a pain to clear after each list item. What's the solution here? Any tips how to make it more clean?
<ul>
<li><img src="#" /> Home</li>
<div class="clear"></div>
<li><img src="#" /> About</li>
<div class="clear"></div>
</ul>


You could make the li elements to clear..
<ul>
<li class="clear"><img src="#" /> Home</li>
<li class="clear"><img src="#" /> About</li>
</ul>
If you only float the contents of the li (the img and the a) then you can just set the overflow of the li to auto or hidden and it will work as expected.
li{overflow:auto;}
Demo at http://jsfiddle.net/SqWHB/


Yes, use a class for the clearfix:
and add this css:
.clearfix:before, .clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}


You need the clear only one time and that is after the ul.
<ul>
<li><img src="#" /> Home</li>
<li><img src="#" /> About</li>
</ul>
<div class="clear"></div>

Related

Why is nth child not working on my Ul element

So I am trying to select the 6th child of the Unordered list and it just can't seem to select the item. Is it because the LI's have an anchor as a child?
.nav-links ul:nth-child(6) {
margin-left: auto;
}
<ul>
<li>Vectors</li>
<li>Photos</li>
<li>PSD</li>
<li>Video</li>
<li>More <i class="fa-solid fa-caret-down"></i></li>
<li id="nth">Submit</li>
<li>
<img src="Gmail_icon_(2020).svg.png" alt="" width="20px">
</li>
<li>
<img src="meta-logo.png" alt="" width="30px">
</li>
</ul>

Edit: Updated to select the sixth immediate li child, instead of every sixth child anywhere under the ul.
Your selector is set up to select the ul that is the 6th child, when it appears you want the 6th li. Not sure what your intent is with the margin, but this will fix your selector:
/* also omitted the '.nav-links' qualifier because it's not in your markup */
ul > li:nth-child(6) {
margin-left: auto;
background: red;
}
<ul>
<li>Vectors</li>
<li>Photos</li>
<li>PSD</li>
<li>Video</li>
<li>More <i class="fa-solid fa-caret-down"></i></li>
<li id="nth">Submit</li>
<li>
<img src="Gmail_icon_(2020).svg.png" alt="" width="20px">
</li>
<li>
<img src="meta-logo.png" alt="" width="30px">
</li>
</ul>

How to place an image between bullet point and text in ul?

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>

Issue css3 slideshow working position

I have been created css3 image slideshow, Its working perfect, but location of slideshow is absolutely incorrect.
Here is the code in html:
<div id = "header">
<div class = "wrap">
<div class = "logo">
<img src = "img/photo.jpg" alt = "" />
</div>
<div class = "navigation">
<ul>
<li>HOME</li>
<li>ABOUT </li>
<li>HISTORY </li>
<li>NEWS </li>
<li>CONTACT </li>
<li>CONTACT </li>
<li>CONTACT </li>
</ul>
</div>
</div>
</div>
<div class = "wrap">
<div class="slides">
<ul>
<li><img src="slide-1.jpg" alt="" /></li>
<li><img src="slide-2.jpg" alt="" /></li>
<li><img src="slide-3.jpg" alt="" /></li>
<li><img src="slide-4.jpg" alt="" /></li>
</ul>
</div>
</div>
<div class = "wrap">
<p>Saina Nehwal (About this sound pronunciation (help.info); born 17 .../p>
</div>
Here is my working jsfiddle: http://jsfiddle.net/qj6s0xdh/
Can anyone help me to align the position of slideshow?
Thanks in advance.

Is this what you want?
http://jsfiddle.net/qj6s0xdh/2/
I don't think the float: left; in the #header is what you want.

Here is the slider is now center-aligned by just adding following to the ul of slider
width: 60%;
margin: auto;
display: block;

Add the following properties:
.slides ul li {
width:100%;
}
.slides ul li image {
margin:0 auto;
}

Spacing between <li>'s [duplicate]

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>

Arrangement of "list items" in listview using html

This is my first "phonegap" application project, so done with the listview in html based on the requirement but listview is not properly formatted (ie one below the other), how to make the items to display one below the other. please help me.
here's my code for listview
<div>
<ul data-role="listview" data-inset="true">
<li><a href="#">
<img src="images/c3.jpeg" align="left">
<h3>CONGRATULATIONS</h3>
</a>
</li>
<li><a href="#">
<img src="images/c2.jpeg" align="left">
<h3>HOLYDAY</h3>
</a>
</li>
<li><a href="#">
<img src="images/card1.jpeg" align="left">
<h3> I'M SORRY </h3>
</a>
</li>
<li><a href="#">
<img src="images/c4.jpg" align="left">
<h3> HAPPY BIRTHDAY </h3>
</a>
</li>
<li><a href="#">
<img src="images/c5.jpg" align="left">
<h3> MISSING U</h3>
</a>
</li>
<li><a href="#">
<img src="images/images.jpg" align="left">
<h3> ENGAGEMENT</h3>
</a>
</li>
![device output][1]

First of all you cannot use <br /> as direct ul child and secondly am sure you are using float: left; for the images which are inside li tag and thus it is spoiling the layout. Inorder to fix it, use the CSS property block below
ul.class_name li {
overflow: hidden;
/* Other styles goes here */
}
Just assign a class to ul element, replace the .class_name in CSS with the class you assigned to the ul element in your HTML.
Also, you can use the below declaration to self clear the parent element like
.clear:after {
display: table;
content: "";
clear: both;
}
This will self clear the parent element just like overflow: hidden; does, but in a better way.