Not able to add an image inside a list item

Design help General
1

Hi!

I’ve been trying to make a list item with text that also holds an image tag. But when I drag the image towards the list item, I get the red notice “Only list items can be added directely inside a list”, even though what I’m trying to achieve is basically:

<ul>
    <li><img src="">text</li>
</ul>

Thank you!

1 Like
2

You must be doing something strange, it’s supposed to work (thanksfuly! Lists are a huge part of HTML/CSS layouting)

Here is how I do Google Chrome – Tapes

1 Like
3

Thank you for that Vincent!

Oh, I think I know what is going on! I alerady had text in the list item. In that case Webflow does not allow an image to be added inside it. It also doesn’t allow a text to be written inside the list item with image (unless I use a tag like <p>, that is). Is this a W3C thing?

4

Not sure what you exactly mean… look, I can put whatever I want in a <li> Google Chrome – Tapes and W3C is fine with it. Lists guaranty, and for a long time, that a fancy layout degrades correctly, with a decent hierarchy, when viewed on a very low end browser (ie no browser at all but a device for visually impaired people, or a console).

It’s an accessibility matter. Use and abuse of lists. When an element has siblings, you can think of a list. Sometimes grids of floating divs are a pain to maintain when an inline list works like a charm.

5

So you can nest lists too Google Chrome – Tapes

6

Thanks again Vincent!

Let me explain better: I can (and did) do this:

<ul>
    <li>
        <img src="">
        <p>text</p>
    </li>
</ul>

What I seem not to be able to do is:

<ul>
    <li>
        <img src="">
        text
    </li>
</ul>

Which is not a big deal, it even feels more correct to declare a tag on the text. I only ask because previously I used to put in the text inside the list item without the tags.

1 Like
7

Yep not a big deal, and also you should not. As we said, we can put so much things in <li>'s that it required to wrap any text with a minimum <p class="list-item-label"> for example.

1 Like