2016-04-23 2 views
0

Я пытаюсь показать вкладку nav (class="nav nav-tabs") под столом с вертикальным пространством.Активная вкладка nav не должна иметь нижнюю строку

Когда я использую «<p>&nbsp;</p>» в качестве проставки, вкладки отображаются правильно. Но это слишком много места. Я предпочитаю использовать «<br />».

Однако, когда я использую «<br />», первая вкладка «Актив» приобретает горизонтальную линию на ее нижнем краю. Это неверно.

Это выглядит следующим образом:

image description

Вот код. Хотя я не вижу проблемы в JSFiddle, только на моем сайте (не очень полезно?) ...

https://jsfiddle.net/iamrobertandrews/ndkmw1te/

Проблема проявляется в Chrome, но не на сафари в любой прошивкой или Mac OS X.

+0

Как вы упомянули в вопросе, не очень полезно, что вы предоставляете ссылку jsfiddle, где вы не можете воспроизвести проблему ... предлагаю вам как можно больше сузить свой код и опубликовать соответствующий бит здесь ... это упражнение также может заставить вас найти виновника в этом процессе ...;) – webeno

+0

и, кстати, что я делаю вообще в таких случаях, я нажимаю правой кнопкой мыши элемент (в этом в случае активной вкладки) и нажмите «Осмотреть» (при условии, что вы используете Chrome или Firefox ...); который затем покажет мне правила css, применяемые к этому элементу ... У Chrome есть вкладка «Вычислить» справа (не уверен в Firefox), в которой будет отображаться каждое правило CSS, применяемое к этому конкретному элементу, строка за строкой ... вы можете хотите посмотреть на его родительский элемент и дочерние элементы, посмотрите, есть ли у них эта граница где-то ... – webeno

ответ

0

Похоже, что ваш тег <br/> может иметь некоторый css, добавляющий стиль нижнего края на: first-child.

Я развернул ваш пример и добавил немного css, чтобы указать маржу, которую вы объяснили, которую вы ищете.

https://jsfiddle.net/xor4x5dw/

.nav.nav-tabs { 
    margin-bottom: 10px 
} 

А вот еще один пример, как я не мог сказать, если вы хотите пространство над или под вкладками.

https://jsfiddle.net/607kn7b1/

.nav.nav-tabs { 
    margin-top: 10px 
} 

Кроме того, с этим, вы можете удалить использование P теги и теги BR для интервала.

+0

Что странно, если у меня есть только одна таблица над вкладками, все в порядке, '
' не заставляет строку на активную вкладку. Но две или более таблиц выше бросает его. –

+0

RGeoffrey - также странно, используя ваш метод (то есть используя 'margin-top', а не'
'или'

 

'), похоже, не работает для меня. На активной вкладке по-прежнему отображается горизонтальная нижняя строка. Только в Chrome. –

Смежные вопросы