html - margin 和填充在nth-last-child中不起作用

我必须在右侧显示最后两个数字6和7，并且正在显示，但是两个数字之间没有空格，我需要相等的空间。我尝试了边距和填充，但是没有用。您能帮我吗？

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

最佳答案

我会尝试将6和7反转并在p元素中使用float，如果这对您有用。
像这样：

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