CSS - Показать изображения рядом друг с другом

Question

Я создаю веб-страницу, на которой показаны фотографии симпатичных собак. Для каждой собаки я хочу показать имя собаки, а затем фотографию под ней.

Я хотел бы, чтобы изображения отображались бок о бок, но показаны вертикально.

Вот моя скрипка

http://jsfiddle.net/53bnhscm/2/

Вот мой HTML

<h1>Listing dogs</h1> 

<ul> 
    <li> Dog 1 </li></br> 
    <li> 
    <a href="/dogs/2"> 
     <img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" /> 
    </a>   
</li> 
</ul> 
<ul> 
    <li> Dog 2 </li></br> 
    <li> 
    <a href="/dogs/3"> 
     <img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" /> 
    </a> 
    </li> 
</ul> 

Вот мой CSS

li { 
    list-style: none; 
    display: inline; 
} 

Я думал break заявление после каждого элемента списка и а display:inline собственность будет трюк, но я думаю, нет.

Answer 1

Ваши li s содержатся в их собственных ul, поэтому вам нужно вставить это вместо этого.

ul { 
    list-style: none; 
    display: inline-block; //use instead of inline 
} 

FIDDLE

Также li теги больше для элементов списка, так что это не реальный эффективный способ сделать это. Плюс его много дополнительного кода. Вы можете просто обернуть разделы в контейнере и инлайн, что:

HTML

<h1>Listing dogs</h1> 

<div class="wrapper"> 
    Dog 1 
    <a href="/dogs/2"> 
     <img alt="Dog 1" src="..." /> 
    </a> 
</div> 
<div class="wrapper"> 
    Dog 2 
    <a href="/dogs/3"> 
     <img alt="Dog 2" src="..." /> 
    </a> 
</div> 

CSS

.wrapper{ 
    display: inline-block; 
} 

.wrapper a{ 
    display: block; 
} 

EXAMPLE

Answer 2

Здесь скрипку. Ваша разметка грязен, кстати, я рекомендую использовать HTML5 разметку <figure> так что вы можете легко добавить <figcaption>: http://jsfiddle.net/53bnhscm/7/

<h1>Listing dogs</h1> 

<figure> 
    <figcaption>Dog 1</figcaption> 
    <img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" /> 
</figure> 
<figure> 
    <figcaption>Dog2</figcaption> 
    <img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" /> 
</figure> 

CSS

figure { 
    float:left; 
    display:inline-block; 
} 

Answer 3

Другим решением является использование display: table-cell для ul элементов:

ul { 
 
    display: table-cell; 
 
} 
 
li { 
 
    list-style-type: none; 
 
}

<h1>Listing dogs</h1> 
 

 
<ul> 
 
    <li>Dog 1</li> 
 
    </br> 
 
    <li> 
 
    <a href="/dogs/2"> 
 
     <img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" /> 
 
    </a> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li>Dog 2</li> 
 
    </br> 
 
    <li> 
 
    <a href="/dogs/3"> 
 
     <img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" /> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 4

ul > li { 
    list-style: none; 
    display: inline; 
    float: left; 
    margin: 0 5px; 
} 

И, я думаю, вы выглядите примерно так. В этом случае вы должны отредактировать свой html-код http://jsfiddle.net/ahmadsharif/p0cbmy2h/

Answer 5

Следующий ответ правильный для вашей разметки.

ul { 
    list-style: none; 
    display: inline-block; //use instead of inline 
} 

Но если вы имеете в виду именно то, что написано в вашем вопросе, то одна вещь, которую я должен упомянуть и это «Вы должны заботиться о вашей HTML-разметки.»

<ul> 
    <li> 
    <a href="/dogs/2"> 
     <b>Dog 1</b> 
     <img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" /> 
    </a>   
</li> 
<li> 
    <a href="/dogs/3"> 
     <b>Dog 2</b> 
     <img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" /> 
    </a> 
    </li> 
</ul> 

и тогда ваш CSS будет:

ul li{ 
    display: inline-block; 
} 
ul li a b{ 
    display: block; 
    text-align: center; 
    margin-bottom: 5px 
} 

Answer 6

Просто используйте UIKIT и его сетку. Таким образом, они будут автоматически складываться на телефонах.

http://getuikit.com/docs/grid.html

<div class="uk-grid"> 
<div class="uk-width-1-2">Your Image HERE</div> 
<div class="uk-width-1-2">Another Image Here</div> 
</div>