Make the width of the <ul> equal to the width of an image inside a <li> of the <ul>

Question

Make the width of the <ul> equal to the width of an image inside a <li> of the <ul>

Asked 7 years, 1 month ago

Viewed 78 times

0

I have a ul, inside it has 3 li, inside one of these li has an image, I wonder if it has a method via css to make the width of ul equal the width of the image. (without changing the width of the image) I want to do this because the texts end up being larger than the width of the image and I can not change the size of the image

<ul>
    <li><p>Texto texto texto</p></li>
    <li><img src="qualquer-img.png" alt="qualquer img"></li>
    <li><p>Texto texto texto texto texto texto texto texto texto texto texto</p></li>
</ul>

1

I believe this should be the default behavior of ul. You can include the CSS you use?

– Oralista de Sistemas

2017/05/11 at 16:29
the problem is that the texts end up getting bigger than the image, and I haven’t added css to this part of the code.

– Daniel Castro

2017/05/11 at 16:47
Maybe use width and height set?

– Paz

2017/05/11 at 16:49
As I said in the question I can not change the size of the image and I will have several lists like this and I would like a solution for all

– Daniel Castro

2017/05/12 at 12:07

1 answer

Browser other questions tagged css html5 image

You are not signed in. Login or sign up in order to post.

by Felipe Coelho • **569** points · Answer 1 · 2017-05-11T16:59:45+00:00

Put float: left on your ul, so the size of ul will suit your content.

HTML:

<ul>
    <li><p>Texto texto texto</p></li>
    <li><img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" alt="qualquer img"></li>
    <li><p>Texto texto texto texto texto texto texto texto texto texto texto</p></li>
</ul>

CSS:

ul {  
  float: left;
}

ul li {
  list-style-type: none;
}