Элемент "a" внутри элемента "li" переполняет элемент "li"

Question

Я пытаюсь создать очень простую вкладку "без излишеств", используя html & css. Для этого у меня есть куча элементов li, и внутри каждого из них есть элемент «href». Теперь, когда я смотрю на вывод в IE & Firefox (после установки стилей, чтобы список отображался горизонтально с правильной границей и всем прочим), я вижу, что элемент «a» выходит за пределы элемента «li». Как мне изменить размер элемента "li" на основе элемента "a"?

CSS и HTML следующим образом

#tabs ul
{
  list-style:none;
  padding: 0;
  margin: 0;
}

#tabs li
{
  display: inline;
  border: solid;
  border-width: 1px 1px 1px 1px;
  margin: 0 0.5em 0 0;
  background-color: #3C7FAF;
}

#tabs li a
{
  padding: 0 1em;
  text-decoration: none;
  color:White;
  font-family: Calibri;
  font-size: 18pt;
  height: 40px;
}

<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
</div>

Answer 1

Вы также можете посмотреть на такие сайты, как:

1. http://css.maxdesign.com.au/listamatic/
2. http://accessify.com/tools-and-wizards/developer-tools/list-o-matic/
3. http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/

Иногда весело изобретать велосипед, а иногда нет: D

Answer 2

Вы забыли "#" в объявлениях CSS. В вашем HTML-коде есть id = "tabs", на который нужно ссылаться как

#tabs {
    ....
}

в CSS. Остальное - доводка;)

И попробуйте

#tabs {
    display: inline-block;
}

вместо дисплея: встроенный;

Answer 3

Эта статья из A List Apart о списках стилей может помочь.

Answer 4

Просто display:inline-block на обоих li & a помогло мне, чувак. Списки растянуты, чтобы соответствовать тому, что я сделал со ссылками.

Answer 5

Inline-block - хороший способ пойти (как предложено). Но если вы хотите, чтобы это был кросс-браузерный браузер, вам нужно добавить «магию» CSS-хакерства:)

Один очень хороший учебник по теме: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Используя метод из этой статьи, вы получите следующий CSS:

/* cross browser inline-block hack for tabs */
/* adapted from:
/* http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */

#tabs ul, 
#tabs li, 
#tabs li a {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: bottom; 

    margin:0; padding:0; /* reset ul and li default settings */

}

/* The rest is "window dressing" (i.e. basically the tab styles from your CSS) */

#tabs li a {
    margin: 0 0.5em 0 0;
    background-color: #3C7FAF;
    padding: 0 1em;
    text-decoration: none;
    color:white;
    font-family: Calibri;
    font-size: 18pt;
    height: 40px;    
    }

Answer 6

Вы также можете просто дать своему подопечному немного:

#tabs li {
    padding: 8px 0 0;
}

Answer 7

даю

display:block

для тегов li и a. Тогда плавающий ли. Вы можете добавить этот код, чтобы li полностью заключил:

overflow: hidden; zoom: 1; word-wrap: break-word;

Это очистит все внутри.

Answer 8

придать стилю якорь как

 display:block

Answer 9

Попробуйте настроить отображение элемента li как «inline-block».

http://www.quirksmode.org/css/display.html