Встроенные элементы с шириной

Кажется, этот вопрос часто задают в Интернете, но я до сих пор не могу найти решение.

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

<div id="tabs">
<ul id="tabs-nav-cont">
    <li class="tabs-navs"><a href="#tabs-1">Nav 1</div></a></li>
    <li class="tabs-navs"><a href="#tabs-2">Nav 2</div></a></li>
    <li class="tabs-navs"><a href="#tabs-3">Nav 3</div></a></li>
    <li class="tabs-navs"><a href="#tabs-4">Nav 4</a></li>
</ul>
</div>

Единственный способ, которым я могу это сделать, - вернуть их обратно в блочные элементы. Это не то, что я хочу, потому что они отображаются вертикально. Поэтому я попытался поместить div в якоря, чтобы я мог их размер. Однако они, похоже, тоже меняют их обратно на блочные элементы.

Я в замешательстве. Кто-нибудь, пожалуйста, помогите :)


html css width inline
person Ben Shelock    schedule 06.07.2009    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

Если это только для высоты (и все содержимое lis помещается каждое в одну строку), вы хотели бы использовать line-height: 123px, который устанавливает высоту встроенного блока в 123 пикселя (то есть на строку).

Или, довольно часто, если навигация выровнена по левому краю, перемещайте их:

#nav li {
  display: block;
  float: left;
}

Ваше здоровье,

person Boldewyn    schedule 06.07.2009
comment
Что ж, слава богу за 2009 год. Я понятия не имел, что существует встроенный блок. Благодарю вас! - person Ben Shelock; 06.07.2009
comment
;-) @Ben: Пожалуйста. @Stobor: я снова посетил ссылку только на прошлой неделе, так что она была доступна в моей истории браузера. - person Boldewyn; 06.07.2009

arrow_upward
1
arrow_downward

Потому что это был не 2009 год, когда мне впервые пришлось это решать :), я получил решение для firefox со следующим классом css:

.ib { display: -moz-inline-block; display: inline-block;}

Это мой общий класс встроенных блоков, который я использую там, где это необходимо...

Синан.

person Sinan    schedule 07.07.2009