Text-Indent - это перемещение элементов (якорных тегов) со страницы.

Question

Text-Indent - это перемещение элементов (якорных тегов) со страницы.

0

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

<div id="navigation">
    <ol>
    <li class="news"><a href="news.html">news</a></li>
    <li class="review"><a href="review.html">Review</a></li>
    <li class="contact"><a href="contact.html">Contact</a></li>
    <li class="photos"><a href="photos.html">Photos</a></li>

    </ol>
</div>

и вот мой CSS:

#navigation li {
float: left;
height: 30px;
margin: 0 0px 0 0;
text-indent: -9999px;}

#navigation li.news {
background: url( "news.png" );
display:block;
width: 308px;
height: 80px;
list-style:none;}

#navigation li.review {
background: url( "review.png" );
width: 308px;
height: 80px;
list-style:none;}

#navigation li.contact 
{
background: url( "contact.png" );
width: 308px;
height: 80px;
list-style:none;}

#navigation li.photos 
{
background: url( "photo.png" );
width: 308px;
height: 80px;
list-style:none;}

Любая помощь будет оценена по достоинству.

user2977102 05 янв. 2014, в 05:51

Источник

Теги:

html

css

2 ответа

0

Что-то вроде этого должно работать. Отрегулируйте соответствующим образом.

#navigation a {
    display: inline-block;  //or block
    width: 308px;      //adjust accordingly
    height: 80px;      //adjust accordingly
}

CRABOLO 05 янв. 2014, в 01:39

Ещё вопросы

m59 · Accepted Answer · 2014-01-05T02-35-00.000Z

text-indent перемещает теги <a> с страницы, потому что <a> display: inline по умолчанию. В этом случае он обрабатывается вроде как текст и получает отступы. Вы могли бы сделать это вместо этого:

#navigation li {
float: left;
height: 30px;
margin: 0 0px 0 0;
}

#navigation a {
  display: block;
  text-indent: -9999px;
  height: 100%;
}

Хотя я не уверен, зачем вам текст там вообще.

Просмотрите эту демонстрацию: http://jsbin.com/ejeGufa/2/edit

Вы можете сказать, что теги <a> теперь находятся в правильном месте, потому что курсор изменяется (или вы можете проверить элемент в инструментах dev).

Кстати, вы можете избежать повторения кода, сделав это:

#navigation li {
  list-style: none;
  float: left;
  margin: 0;
  display:block;
  width: 308px;
  height: 80px;
}

#navigation a {
  display: block;
  text-indent: -9999px;
  height: 100%;
}

#navigation li.news {
  background: red;
}

#navigation li.review {
  background: blue;
}

Это работает сейчас, большое спасибо. Просто понял, что мне не нужен отступ или текст в списке. Я использовал нелепый способ избавиться от текста.
@ user2977102 круто! Не забудьте принять ответ!
спасибо я на самом деле понятия не имел.
@ user2977102 нет проблем! Возможно, вы захотите сделать это и по некоторым старым вопросам. Это помогает другим зрителям узнать, какой ответ был наиболее полезным, и дает оценку человеку, который помог вам.