Стиль списка в CSS для отображения в строке

0

У меня есть неупорядоченный список, который отображает ссылку и изображение, и я хочу отобразить их в строке. я использовал следующее:

<ul>
   <li><a href="www."><img src="www."/>Link one</a>
<li><a href="www."><img src="www."/>Link two</a>
<li><a href="www."><img src="www."/>Link three</a>
</ul>

в css я поставил:

li {
display: inline;
margin: 0 10px;
}

но в списке по-прежнему отображается один элемент на строку

  • 0
    Вы видели, сколько места занимает элемент списка?
  • 0
    Я думаю, что поскольку размер изображения большой, то получается по одному элементу в строке
Теги:
list

4 ответа

1

Закрыть теги li

<style>
    li {
        margin: 0 auto;
        position: relative;
        float: left;
        display: inline;
    }
    </style>
    <ul>
       <li><a href="www."><img src="www."/>Link one</a></li>
        <li><a href="www."><img src="www."/>Link two</a></li>
        <li><a href="www."><img src="www."/>Link three</a></li>
    </ul>
0

Закройте свой ли и используйте его, как и ожидалось

<ul>
<li><a href="www."><img src="www."/>Link one</a></li>
<li><a href="www."><img src="www."/>Link two</a></li>
<li><a href="www."><img src="www."/>Link three</a></li>
</ul>
0

Попробуй это

li {
float: left;
width: 100px; /*your width*/
margin: 0 10px;
}
0

я нашел ответ, чтобы изменить его для отображения: inline-block;

надеюсь, это поможет другим.

  • 0
    inline и inline-block дают одинаковый результат
  • 0
    не для меня это не так?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню