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

StackOverflow https://stackoverflow.com/questions/1085980

  •  23-08-2019
  •  | 
  •  

Вопрос

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

У меня есть панель навигации (она переключается между вкладками с помощью 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 в якоря, чтобы можно было увеличить их размер.Однако они, похоже, снова меняют их на блочные элементы.

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

Это было полезно?

Решение

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

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

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

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

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

Другие советы

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

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

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

Синан.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top