Элементы рядом с изображениями с использованием CSS

Question

Я пытаюсь отображать изображения рядом, используя только CSS. Проблема в том, что изображения отображаются не в виде строки, а в виде списка (для этого я использую тег). Возможно, я использую неправильный тип тега, или мой CSS просто неправильный (см. Ниже):

ul { плыть налево; ширина: 15м; / * ширина изменена * / поле: 0; отступы: 0; list-style-type: нет; list-style-position: снаружи; } li { плыть налево; ширина: 100%; маржа: 20%; }

Я мог бы использовать помощь =)

Answer 1

попробуйте это:

ul.gallery {
   height:425px;
   width:200px;
   list-style-type: none;
}
ul.gallery li {
   border:1px solid #BBBBBB;
   float:right;
   height:50px;
   margin-right:7px;
   margin-top:7px;
   width:50px;
}

И (х) HTML

<ul class="gallery">
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li>
</ul>

Answer 2

вы пытаетесь это сделать?

ul
 li  img 1 /li
 li  img 2 /li
/ul 

если это так, ваш CSS должен быть на элементе li

li { display:block float:left padding: 0 margin: 0} 
ul { padding:0 margin 0;}

Answer 3

Почему бы не использовать теги span вместо ul / li? Использование тегов списка, вероятно, является причиной того, что вы получаете список.