2015-09-07 3 views
1

Я сделал сайт с Лайтбокс 2 фотогалерею. Как-то он отображает «_» (подчеркивание) между каждым уменьшенным изображением. Средство просмотра изображений идеально подходит. Однако подчеркивания подчеркивают меня.Лайтбокс, показывающий символы подчеркивания между изображениями

Есть ли способ удалить символы подчеркивания? Как видите, в коде нет подчеркиваний.

underscores

<a href="images/swan.jpg" data-lightbox="animals"> 
    <img height=183 width=183 src="images/swan.jpg"> 
</a> 
<a href="images/bee.jpg" data-lightbox="animals"> 
    <img height=183 width=183 src="images/bee.jpg"> 
</a> 
<a href="images/deer.jpg" data-lightbox="animals"> 
    <img height=183 width=183 src="images/deer.jpg"> 
</a> 
<a href="images/frog.jpg" data-lightbox="animals"> 
    <img height=183 width=183 src="images/frog.jpg"> 
</a> 
+2

Удалить все пробелы между тегами .... '' или использовать CSS, чтобы удалить подчеркивание по этим ссылкам. Это подчеркивает пробел в вашей разметке. – Archer

+0

Можете ли вы повторить то же самое на jsfiddle, http: //jsfiddle.net – dreamweiver

+0

Я уже получил это, благодаря @Archer и Madalina Taina. Оцените свои усилия, поскольку я новичок в HTML. – Mikex64

ответ

2

Подчеркивание является один или более подчеркнутые символы пробела. Использование:

a{ 
text-decoration:none; 
} 
+0

Спасибо вам большое! Я вставил это на основную таблицу стилей и зафиксировал подчеркивания. – Mikex64

+1

Добро пожаловать, я рад, что решил вашу проблему. –

+0

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

0

Это может быть связано с CSS стиль применяется к помечать некоторых из родительского класса CSS. Поэтому просто добавьте еще один класс или стиль в css для тега, сгенерированного Lightbox, который переопределяет применяемый к нему стиль. Это свойство css удалит подчеркивание: `text-decoration: none; '.

.lightbox a{ 
 
    text-decoration: none !important; 
 
}

<div class="lightbox"> 
 
    <a href="images/swan.jpg" data-lightbox="animals"> 
 
    <img height=183 width=183 src="images/swan.jpg"> 
 
    </a> 
 
    <a href="images/bee.jpg" data-lightbox="animals"> 
 
    <img height=183 width=183 src="images/bee.jpg"> 
 
    </a> 
 
    <a href="images/deer.jpg" data-lightbox="animals"> 
 
    <img height=183 width=183 src="images/deer.jpg"> 
 
    </a> 
 
    <a href="images/frog.jpg" data-lightbox="animals"> 
 
    <img height=183 width=183 src="images/frog.jpg"> 
 
    </a> 
 
</div>

1

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

.thumbs a { 
    display: inline-block;   
} 
.thumbs { 
    font-size: 0; 
} 

.thumbs a { 
    margin-right: 20px; 
} 

Смотрите пример - https://jsfiddle.net/52psj7tz/1/

Смежные вопросы