У меня есть неупорядоченный список, который отображает ссылку и изображение, и я хочу отобразить их в строке. я использовал следующее:
<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;
}
но в списке по-прежнему отображается один элемент на строку
Закрыть теги 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>
Закройте свой ли и используйте его, как и ожидалось
<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>
Попробуй это
li {
float: left;
width: 100px; /*your width*/
margin: 0 10px;
}
я нашел ответ, чтобы изменить его для отображения: inline-block;
надеюсь, это поможет другим.