Question

我正在尝试移动链接，因此它与段落不重叠。我试图应用top和margin-top但链接只是不会移动。在链接下面我有一个hr线。我试图降低它，但它保持不动。不知道如何解决这个问题。请参阅以下代码：

HTML：

<p class="teaser">There are lots of discussions happening around the future of EU citizens living in the UK, whether they will or will not be able to stay in 
the island. Another question is how it is going to affect Brittish citizens living in the EU and another question is what is going to happen with
 British citizens travelling to Europe. Would you as a UK citizen will be required to apply for visa to fly over to Spain or any other destination in 
 Europe?There are lots of discussions happening around the future of EU citizens li</p>
<figure>
 <a class="back" href="articles.html">Back to articles</a>
</figure>

<hr class="bottom-line">

CSS（桌面）：

.teaser {
    text-align:justify;
    margin:auto;
    width: 50%;
    line-height:1.5;
    position:relative;
    top: 20px;
    text-align:justify;
    text-indent:2%;
    line-height: 2;
    font-family: "Times New Roman", Times, Serif;
    font-size: 20px;
}
.back {
    text-align:center;
    top:5px;
    text-decoration: none;
    font-family: "Times New Roman", Times, Serif;
    font-size:25px;
    color: black;
}
.back:hover {
    color: #2347b2;
}
.bottom-line {
    text-align:center;
    width:50%
}

CSS（响应）：

.teaser {
    width: 100%;
    margin:auto;
    top:45px;
}   
.figure back {
    margin: auto;
}
.bottom-line {
    width:100%;
    margin:auto;
}

Answer 1

这里的问题是你忘了填补底部。

只需将以下代码添加到.teaser：

即可

padding-bottom: 30px;

那应该为你解决问题。

哦，你的.figure是错误的，改为：

figure .back { insert code here }

Answer 2

这是由position:relative;分配给.teaser引起的。您可以将其删除以解决此问题。

您应该考虑阅读position-Property以获得更深入的了解。

虽然CSS文件中有一些重复的属性，例如text-align和line-height。您可以使用css linter检查这些内容。

Answer 3

所以......这里有些不对劲。 <figure>是一个不是类的元素，因此不会以“。”开头。您还可以在“响应式”css文件中重复此操作。不确定你认为它应该如何工作，但你需要媒体查询来区分这两者。

您还需要删除position:relative，这是导致您出现问题的原因。

Answer 4

从position:relative

中删除.teaser

.teaser {
    	text-align:justify;
    	margin:auto;
    	width: 50%;
    	line-height:1.5;
    	top: 20px;
    	text-align:justify;
    	text-indent:2%;
    	line-height: 2;
    	font-family: "Times New Roman", Times, Serif;
    	font-size: 20px;
    }
    .back {
    	text-align:center;
    	top:5px;
    	text-decoration: none;
    	font-family: "Times New Roman", Times, Serif;
    	font-size:25px;
    	color: black;
    }
    .back:hover {
    	color: #2347b2;
    }
    .bottom-line {
    	text-align:center;
    	width:50%
    }
    .teaser {
        width: 100%;
    	margin:auto;
    	top:45px;
    }	
    .figure .back {
    	margin: auto;
    }
    .bottom-line {
    	width:100%;
    	margin:auto;
    }

<p class="teaser">There are lots of discussions happening around the future of EU citizens living in the UK, whether they will or will not be able to stay in 
</p>
    <figure>
         <a class="back" href="articles.html">Back to articles</a>
    </figure>
<hr class="bottom-line">

链接与响应式设计中的段落重叠

4 个答案: