温馨提示:本文翻译自stackoverflow.com,查看原文请点击:css - Is there an way to make text stick to div "border"?
css styled-components

css - 有没有一种方法可以使文本贴在div的“边框”上?

发布于 2020-03-27 10:18:33

我一直在尝试找到一种方法来产生与常见的“粘在容器顶部”类似的效果,但我想使它始终贴在容器的边框上,而不是顶部位置,但是当分辨率更改时,我一直使文本一直在移动:在较高的分辨率中,它停留在正确的位置,但是当分辨率减小或变高时,文本开始在容器周围跳舞。
为了澄清,我在容器中使用样式组件,在文本中使用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>

查看更多

查看更多

提问者
Matheus Castro
被浏览
283
Dawid Schmidt 2019-12-10 18:33

您的填充正在更改,因此您无法控制它。如果您真的想要动态填充,则必须将它们设置为相同的值,例如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>