我一直在尝试找到一种方法来产生与常见的“粘在容器顶部”类似的效果,但我想使它始终贴在容器的边框上,而不是顶部位置,但是当分辨率更改时,我一直使文本一直在移动:在较高的分辨率中,它停留在正确的位置,但是当分辨率减小或变高时,文本开始在容器周围跳舞。
为了澄清,我在容器中使用样式组件,在文本中使用inline-css,我已经尝试使用screen.size来“响应” css,以在屏幕尺寸更改时更改marginTop,但似乎没有完全有效或对浏览器友好,并且阅读起来也真的很混乱,所以我希望有更好的方法可以做到这一点,如果这个问题看起来很愚蠢和/或已经被回答,我很抱歉,我已经搜索了很多关于它,但是没有找到适合上下文并且可以工作的任何东西。
.fieldset{
width: 97%;
margin: auto;
background: #00000000;
padding: 1%;
border-radius: 5px;
border: 3px solid gray;
min-height: 50px;
}
.title{
margin-top: -1rem;
font-family: "Helvetica";
color: "grey";
background: "white";
width: 10em;
}
<div class="fieldset">
<h3 class="title">
Title
</h3>
<p>a</p>
</div>
您的填充正在更改,因此您无法控制它。如果您真的想要动态填充,则必须将它们设置为相同的值,例如1vw,并且将它们的.title位置设置为calc(-12px-1vw);
.fieldset{
width: 97%;
margin: auto;
background: #00000000;
padding: 1vw;
border-radius: 5px;
border: 3px solid gray;
min-height: 50px;
}
.title {
margin: 0;
position: relative;
top: calc(-12px - 1vw);
font-family: "Helvetica";
width: 10em;
}
<div class="fieldset">
<h3 class="title">
Title
</h3>
<p>a</p>
</div>