Как заставить li расширяться, чтобы соответствовать миниатюрному контенту? - PullRequest
Новая
       39

Как заставить li расширяться, чтобы соответствовать миниатюрному контенту?

0 голосов
/ 01 апреля 2012

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

У меня есть галерея миниатюр с большими пальцами разных размеров (я загружаю большие пальцы из папки при загрузке страницы).Галерея миниатюр сделана с использованием ул.Когда я устанавливаю свойство il встроенным, чтобы они работали вплотную, а не в списке, li не расширяются, чтобы соответствовать большим пальцам.Если я переключаю отображение li обратно на блокирование (или удаление отображения), они затем расширяются, чтобы соответствовать содержимому ... Если я использую display: inline-block, содержимое содержимого li сжимается до размера li, но тогда li все еще шире, чемimages ... arg!

Как мне сказать, чтобы il расширялся, чтобы соответствовать содержимому без указания размера?

Вот мой CSS: 

.gallery {
width: 100%;
cursor: default;

overflow:hidden;
}
.gallery ul {
list-style:none outside none;
overflow:hidden;
}
.gallery li {
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit; 

margin: 3px;
padding: 5px;   

display:inline; 
position: relative;
vertical-align:top;

overflow:hidden;
}

вотПример кода после его загрузки: 

<div class="gallery">
 <ul>
  <li><a href="brown.png"><img src="/photos/brown.png" alt="" /></a></li>
  <li><a href="blue.png"><img src="/photos/blue.png" alt="" /></a></li>
  <li><a href="light-blue.png"><img src="./photos/light-blue.png" alt="" /></a></li>
 </ul>
</div>

Поэтому, когда я просматриваю страницу, я вижу что-то вроде следующего: 

         __             __
<   ----|  |----   ----|  |----
<   ----|__|----   ----|__|----

Центральные блоки представляют элементы img и пунктирные поменьше.прямоугольники на заднем плане являются родительскими элементами li.(извините, я не смог опубликовать фото, потому что я новичок :))

У кого-нибудь есть идеи?

Заранее спасибо !!

1 Ответ

0 голосов
/ 07 мая 2012

Дэвид, спасибо !!- Я просто посмотрел на код, который вы поместили на JS Fiddle, и не смог понять его, но когда я изменил отображение на встроенный блок, это сработало.Серьезно, я думал, что попробовал inline-block в какой-то момент в последнем миллионе изменений - да ладно, теперь это работает :) Большое спасибо за ответ !!!

...