1. дома
  2. Вопрос и ответ
  3. Margin и padding не работают в nth-last-child

Margin и padding не работают в nth-last-child

2017-02-20 25 views
0

Мне нужно отобразить последние две цифры 6 и 7 с правой стороны, и оно отображается, но между двумя номерами мне не нужно равное пространство. Я попробовал маржу и отступы, но не работал. ты поможешь мне в этом?Margin и padding не работают в nth-last-child

.width-60 { 
 
    width: 60%; 
 
    border: 1px solid #ccc; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.p p { 
 
    color: blue; 
 
    float: left; 
 
    margin: 10px; 
 
} 
 

 
.p p a:nth-last-child(-n+2) { 
 
    color: red; 
 
    position: absolute; 
 
    right: 30px; 
 
    display: block; 
 
}
<div class="width-60"> 
 
    <div class="p"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
    <p>5</p> 
 
    <p> 
 
     <a href="" class="btn"><img src="" />6</a> 
 
    </p> 
 
    <p> 
 
     <a href="" class="btn"><img src="" />7</a> 
 
    </p> 
 
    </div> 
 
</div>

источник

2017-02-20 Narendra Verma

ответ

1

Я хотел бы попробовать инвертирование 6 и 7 и с помощью поплавка прямо в р элементов, если это работает для вас. Что-то вроде этого:

.width-60 { 
 
    width: 60%; 
 
    border: 1px solid #ccc; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.p p { 
 
    color: blue; 
 
    float: left; 
 
    margin: 10px; 
 
} 
 

 
.p p:nth-last-child(-n+2) { 
 
    color: red; 
 
    float: right; 
 
    display: block; 
 
}
<div class="width-60"> 
 
    <div class="p"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
    <p>5</p> 
 
    <p> 
 
     <a href="" class="btn"><img src="" />7</a> 
 
    </p> 
 
    <p> 
 
     <a href="" class="btn"><img src="" />6</a> 
 
    </p> 
 
    </div> 
 
</div>

источник

2017-02-20 12:32:17

+1

Вам не нужно писать 'display: block;', если вы используете 'float' –

+0

Спасибо, что ответили Mr.Alien. Это работает для меня. Я пропустил поплавок: правильно; Спасибо за помощь.Upvote с моей стороны –

+0

Хорошая точка. Но он уже был там, я просто забыл его удалить. Hehe .. –

1

Если вы открыты для использования сгибать вы можете попробовать это:

.width-60 { 
 
    width: 60%; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.p { 
 
    display: flex; 
 
} 
 

 
.p p { 
 
    color: blue; 
 
    margin: 10px; 
 
} 
 

 
.p p:nth-last-child(2) { 
 
    margin-left: auto; 
 
} 
 

 
.p p a:nth-last-child(n-2) { 
 
    color: red; 
 
}
<div class="width-60"> 
 
    <div class="p"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
    <p>5</p> 
 
    <p> 
 
     <a href="" class="btn"><img src="" />6</a> 
 
    </p> 
 
    <p> 
 
     <a href="" class="btn"><img src="" />7</a> 
 
    </p> 
 
    </div> 
 
</div>

источник

2017-02-20 12:44:41 sol

+0

Спасибо, что ответил на Mr.ovokuro.It также работает для меня. Упрек с моей стороны –

0

Вы можете использовать неразрывный пробел слишком

.width-60 { 
 
    width: 60%; 
 
    border: 1px solid #ccc; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.p p { 
 
    color: blue; 
 
    float: left; 
 
    margin: 10px; 
 
} 
 

 
.p p a:nth-last-child(-n+2) { 
 
    color: red; 
 
    position: absolute; 
 
    right: 30px; 
 
    display: block; 
 
}
<div class="width-60"> 
 
    <div class="p"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
    <p>5</p> 
 
    <p> 
 
     <a href="" class="btn">&nbsp;<img src="" />6 &nbsp;</a> 
 
    </p> 
 
    <p> 
 
     <a href="" class="btn"><img src="" />7</a> 
 
    </p> 
 
    </div> 
 
</div>

источник

2017-02-20 12:45:13

2

Перекрытие является причиной по position: absolute. Одним из способов решения этой проблемы является использование flexbox

.width-60 { 
 
    width: 60%; 
 
    border: 1px solid #ccc; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.p { 
 
    display: flex; 
 
} 
 
.p p { 
 
    color: blue; 
 
    margin: 10px; 
 
} 
 
.p p a { 
 
    color: red; 
 
} 
 
.p p:nth-last-child(2) { 
 
    margin-left: auto; 
 
}
<div class="width-60"> 
 
    <div class="p"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
    <p>5</p> 
 
    <p> 
 
     <a href="" class="btn"><img src="" />6</a> 
 
    </p> 
 
    <p> 
 
     <a href="" class="btn"><img src="" />7</a> 
 
    </p> 
 
    </div> 
 
</div>

источник

2017-02-20 12:45:16 LGSon

0 

<style> 
 
.width-60 { 
 
    width: 60%; 
 
    border: 1px solid #ccc; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.p p { 
 
    color: blue; 
 
    float: left; 
 
    margin: 10px; 
 
} 
 

 
.p p:nth-last-child(1){ 
 
\t position: absolute; 
 
    right: 0; 
 
} 
 
.p p:nth-last-child(2){ 
 
\t position: absolute; 
 
    right: 30px; 
 
} 
 

 
.p p:nth-last-child(-n+2) a { 
 
    color: red; 
 
    display: block; 
 
} 
 
</style>
<div class="width-60"> 
 
    <div class="p"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
    <p>5</p> 
 
    <p> 
 
     <a href="" class="btn"><img src="" />6</a> 
 
    </p> 
 
    <p> 
 
     <a href="" class="btn"><img src="" />7</a> 
 
    </p> 
 
    </div> 
 
</div>

Вот мой код. не нужно обменивать последние два значения класса p.

<style> 
.width-60 { 
    width: 60%; 
    border: 1px solid #ccc; 
    height: 100%; 
    position: relative; 
} 

.p p { 
    color: blue; 
    float: left; 
    margin: 10px; 
} 

.p p:nth-last-child(1){ 
    position: absolute; 
    right: 0; 
} 
.p p:nth-last-child(2){ 
    position: absolute; 
    right: 30px; 
} 

.p p:nth-last-child(-n+2) a { 
    color: red; 
    display: block; 
} 
</style>

источник

2017-02-20 12:52:47 Piyali

0

Margin and padding хорошо работает на nth-child.

Ваша задача о положениях ...

Решение 1:

.width-60 { 
 
    width: 60%; 
 
    border: 1px solid #ccc; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.p p { 
 
    float: left; 
 
    margin: 10px; 
 
} 
 

 
.p p a { 
 
    color: blue; 
 
} 
 

 
.p p:nth-last-child(-n+2) { 
 
    float: right; 
 
} 
 

 
.p p:nth-last-child(-n+2) a { 
 
    color: red; 
 
}
<div class="width-60"> 
 
    <div class="p"> 
 
    <p><a href="">1</a></p> 
 
    <p><a href="">2</a></p> 
 
    <p><a href="">3</a></p> 
 
    <p><a href="">4</a></p> 
 
    <p><a href="">5</a></p> 
 

 
    <p> 
 
     <a href=""><img src="" />7</a> 
 
    </p> 
 
    <p> 
 
     <a href=""><img src="" />6</a> 
 
    </p> 
 
    </div> 
 
</div>

Чтобы понять, почему я поменять местами два элемента: Lastest StackOverflow

Решение 2:

.width-60 { 
 
    width: 60%; 
 
    border: 1px solid #ccc; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.width-60 .left p, 
 
.width-60 .right p { 
 
    margin: 10px; 
 
    float: left; 
 
} 
 

 
.width-60 .left { 
 
    float: left; 
 
} 
 

 
.width-60 .left a { 
 
    color: blue; 
 
} 
 

 
.width-60 .right { 
 
    float: right; 
 
} 
 

 
.width-60 .right a { 
 
    color: red; 
 
}
<div class="width-60"> 
 
    <div class="left"> 
 
    <p><a href="">1</a></p> 
 
    <p><a href="">2</a></p> 
 
    <p><a href="">3</a></p> 
 
    <p><a href="">4</a></p> 
 
    <p><a href="">5</a></p> 
 
    </div> 
 
    <div class="right"> 
 
    <p> 
 
     <a href=""><img src="" />6</a> 
 
    </p> 
 
    <p> 
 
     <a href=""><img src="" />7</a> 
 
    </p> 
 
    </div> 
 
</div>

Надеется, что это помогает.

источник

2017-02-20 12:57:22 Quanta

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

  • Нет связанных вопросов^_^