Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

重叠是由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>

Answer 2

我会尝试反转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>

Answer 3

如果您愿意使用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>

Answer 4

你也可以使用非破坏空间

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

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

Answer 6

保证金和填充在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>

要理解为什么我要颠倒两个最新元素：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>

希望它有所帮助。

边距和填充不适用于最后一个孩子

6 个答案: