2013-09-25 2 views
1

Мой код здесь:Удалить запас в прошлом ребенка

HTML

<nav id="pages"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Donate</a></li> 
     <li><a href="#">Video</a></li> 
     <li><a href="#" class="last">Contact</a></li> 
    </ul> 
</nav> <!-- end pages --> 

CSS

#pages{ 
    position: absolute; 
    right: 0; 
    top: 70px; 

    ul li{ 
     float: left; 
     margin-right: 5px; 

     a{ 
      color: @link-color; 
      display: block; 
      padding: 0 10px; 
      border-radius: 5px; 
      font-weight: bold; 
     } 
    } 
} 

.last{ 
    margin-right: 0; 
} 

добавить класс "последний" для последнего ребенка, чтобы удалить запас, но не осуществляется. Я не использую: last-child, потому что это не будет с IE6 или IE7. Надеюсь, кто-то поможет?

ответ

-2

Попробуйте это: -

.last { margin-bottom: 0 !important; margin-right: 0 !important; } 
+0

Я помню, какой-то автор не используется! Важный метод –

+0

@ user2494232: - Вы дали это попробовать? –

+0

Я попытался, но ничего не изменилось, поэтому я прошу кого-нибудь помочь –

2

В вашем примере это li, который имеет правое поле, но вы применили класс к ссылке на якорь.

Ваш выход из CSS будет работать, если вы измените HTML для

<li class="last"><a href="#">Contact</a></li> 
+0

Я попытался, но ничего не изменил bro :) –

+1

Для улучшения поддержки (IE8) попробуйте 'margin-left' вместо' margin-right', который затем можно удалить с помощью 'li: first-child. [Codepen Example] (http://codepen.io/Paulie-D/pen/urgqD) –

+0

Я предпочитаю использовать класс, надеюсь, вы поможете мне решить эту проблему :) –

1

Вам нужно добавить класс к <li> тега, а не <a> тега.

0

Выход этого МЕНЬШЕ основе CSS будет один из этого - я не уверен, какой из них, я не знаком с этим МИНУС:

#pages > ul > li { 
    margin-right: 50px; 
} 

#pages ul li { 
    margin-right: 50px; 
} 

Класс .last определяется за пределами этой иерархии , Проблема в том, что это «только» класс и поэтому всегда будет иметь более низкий приоритет, чем правило с идентификатором #pages.

Так как вы определяете это полное, как это:

#pages ul li.last { 
    margin-right: 0; 
} 

Или добавьте его внутрь другого определения:

#pages { 
    ul li {} 
    ul li.last { margin-right: 0; } 
} 

Демо

Try before buy

0

Изменить ваш CSS в

nav#pages ul li.last { 
    margin-right: 0px; 
} 

и ваш HTML в:

<li class="last"><a href="#">Contact</a></li> 
4

Там нет необходимости добавлять класс «последний» лучшую практику, чтобы сделать это и не писать много кода будет:

#pages li:last-child{ 
    margin-right: 0px; 
} 

Таким образом, вам не нужно создавать какой-либо класс, последний или что-то еще. Css будет выглядеть на id-страницах, последним li (последним-ребенком) и будет делать это с margin-right от 0.

0

Вы можете использовать :not(:last-child), чтобы исключить последний ребенок.Так, для примера, вы бы:

nav#pages ul :not(:last-child) { 
    margin-right: 5px; 
} 

Это будет применять margin-right: 5px для всех, кроме последнего <li> ... </li>.

Оформить заказ jsfiddle example.

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