n番目の最後の子でマージンとパディングが機能しない

Question

最後の2つの数字は6と7を右側に表示する必要がありますが、表示されていますが、2つの数字の間にスペースはありません。私はマージンとパディングを試しましたが、動作しませんでした。これで私を助けてくれますか？

.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>

Answer 1

それはあなたのために働く場合、私は、6および7を反転し、p要素にフロート右を使用してみます。このような 何か：

.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>

Answer 2

あなたはフレックス使用に開いている場合は、この試すことができます：あなたはあまりにもノーブレークスペースを使用することができます

.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>

Answer 3

を

.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>

Answer 4

重複はposition: absoluteによって原因です。これを解決する1つの方法は、

.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>

Answer 5

<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>

flexboxはここに私のコードで使用することです。最後の2つのクラスの値を交換する必要はありません。

<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> 

Answer 6

nth-childでは、余白と埋め込みがうまく機能しています。

あなたの問題は...位置について

策1：StackOverflow

解決策2：私は2つの最新の要素を逆に理由を理解するには

.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>

：

.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>

それがお役に立てば幸いです。