css фоновое изображение обрезается

Question

У меня есть неупорядоченный список, и фоновое изображение обрезается при попытке разместить его рядом с текстом.

Я использую jquery для добавления класса в тег привязки для отображения изображения, и оно работает нормально, единственная проблема - изображение обрезается. Я играл с css, но не могу понять, как правильно отобразить изображение ... кажется, что

как-то скрывает изображение позади него ... могу ли я разместить изображение перед , чтобы он отображался ... или я что-то упустил?

Может кто-нибудь мне помочь? Спасибо.

Вот HTML:

<ul id="nav>
    <li>
       <a class="folder_closed">Item 1</a>
       <div style="display:none">Content for item 1</div>
    </li>
</ul>

Вот CSS:

ul#nav{
    margin-left:0;
    margin-right:0;
    padding-left:0px;
    text-indent:15px;
}

#nav > li{
    vertical-align: top;
    text-align:left;
    clear: both;
    margin-left:0px;
    margin-right:0px;
    padding-right:0px;
    padding-left:15px;
}

.folder_open{
    position:relative;
    background-image: url(../images/maximize.png);
    background-repeat: no-repeat;
    background-position: -5px 1px;
}
.folder_closed{
    position:relative;
    background-image: url(../images/minimize.png);
    background-repeat: no-repeat;
    background-position: -5px 1px; 
}

Answer 1

Это звучит как проблема высоты строки - просто для эксперимента попробуйте установить LI "line-height: 40px;" и посмотреть, если ваше изображение показывает полностью ...

В этом случае я использую абсолютное позиционирование. Сначала, чтобы настроить его, вы должны располагать свои UL и LI относительно:

<style type="text/css">
  ul, li {
    position: relative;
  }
</style>
<ul>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

Затем добавьте отступ слева от LI:

* +1007 *

В этом случае вы используете якорь с некоторыми стилями класса. Разбейте на две части:

<li>
  <a class="folder_icon folder_closed"></a>
  <a class="folder_title">... your title ...</a>
  ... your other content ...
</li>

А затем превратить один из As в заблокированный дисплей:

<style type="text/css">
  li .folder_icon {
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    width: 16px;
    height: 16px;
  }

  li .folder_closed {
    background-image: url("../images/minimize.png");
    background-repeat: no-repeat;
    background-position: -5px 1px; 
  }
</style>

Как это?

Answer 2

Вам нужно добавить display:block и некоторые размеры (и, возможно, некоторые отступы, чтобы он выглядел хорошо) к вашему тегу A, чтобы элемент был достаточно большим, чтобы содержать фоновое изображение.

Вам лучше перенести все стили в тег A. Не пытайтесь стилизовать теги LI вообще (если вам не нужны плавающие элементы).

.folder_open{
    vertical-align: top; <--- use padding to accomplish this instead
    text-align:left; <-- this too
    clear: both;
    margin-left:0px;
    margin-right:0px;
    padding-right:0px;
    padding-left:15px;
    position:relative;  <--- not needed.
    background-image: url(../images/maximize.png);
    background-repeat: no-repeat;
    background-position: -5px 1px;
    display:block;
    height: ??px;
    width: ??px
}

Answer 3

добавить " line-height:? Px; " к таблице стилей контейнера

Answer 4

Похоже, это может быть ваша фоновая позиция ... если я правильно понимаю, максимизируемое изображение исчезает, верно?

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

.folder_closed {
  background: transparent url(../images/maximize.png) no-repeat scroll -5px 1px;
}