1. 首頁
  2. 問答
  3. 保證金和填充不能在第n個最後孩子中工作

保證金和填充不能在第n個最後孩子中工作

2017-02-20 43 views
0

我必須在右側顯示最後兩個數字6和7，它正在顯示，但兩個數之間沒有空格，我需要相等的空間。我嘗試了保證金和填充但沒有工作。你會幫助我嗎？保證金和填充不能在第n個最後孩子中工作

.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和右邊的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>

來源

2017-02-20 12:32:17

+1

如果您使用'float'，則無需編寫'display：block;' –

+0

感謝您回覆Mr.Alien。它爲我工作。我錯過了浮動：對; 感謝您的幫助。Upvote從我身邊 –

+0

好點。但它已經在那裏，我忘了將它刪除。嘿嘿.. –

1

如果你是開放的使用Flex你可以試試這個：

.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也爲我工作。 Upvote從我身邊 –

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

邊緣和填充在n孩子上運行良好。

你的問題是關於位置的...

解決方案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>

要明白我爲什麼反轉兩個最新的元素：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

相關問題

 相關問題