Другой элемент списка - PullRequest
Новая
       9

Другой элемент списка

0 голосов
/ 21 августа 2010

Эй, у меня очень забавная проблема. У меня очень длинное меню, и я хочу иметь ОДИН пункт с различной шириной и высотой.

Меню выглядит так: 

<ul id="nav">
  <li id="smaller"><a href="#" id="smallerLink">The smallest item</a></li>
  <li><a href="#">Another item</a></li>
  <li><a href="#">Another item</a></li>
  <li><a href="#">Another item</a></li>
  (...)
</ul>

Тогда у меня есть что-то вроде:

style.css: 

#nav {
  list-style-type: none;
}

#nav li {
  display: inline-block;
  line-width: 2em;
  width: 20px;
  height: 20px;
}

#nav li a {
  display: inline-block;
  width: 20px;
  height: 20px;
}

#smaller {
  width: 10px;
  height: 10px;
}

#smallerLink {
  width: 10px;
  height: 10px;
}

Почему первый элемент не 10x10px?

1 Ответ

2 голосов
/ 21 августа 2010

Поскольку он содержит тег a с шириной и высотой 20 пикселей.Установите переполнение: скрыто в вашем определении #smaller css, тогда оно должно работать. И уменьшите #nav li # для большей детализации. 

#nav li#smaller {
    width: 10px;
    height: 10px;
    overflow: hidden
}
...