Question

如何隐藏MON后面的边框并提供一些像这张图片中的空间

https://www.screencast.com/t/SJmg63NZuF

＆＃13;

div {
  height: 100px;
  width: 100px;
  border: 2px solid black;
}

h2 {
  width: 50px;
  margin-top: -15px;
  margin-left: 0px;
  padding: 0 10px;
}

＆＃13;

<div>
  <h2>MON</h2>
  <p>7am - yeah</p>
</div>

＆＃13;

Answer 1

我认为你正在努力实现这一目标。使用<legend>标签（<fieldset>的子公约的惯例通常应用于表单，但您可以实现与下面所示相同的操作。我稍微调整了一下代码，并添加了一个背景，向您展示如何实现您所寻找的截图。希望，它有所帮助。

＆＃13;

body {
  background-image: url("https://ak9.picdn.net/shutterstock/videos/21522739/thumb/1.jpg");
}

fieldset {
  width: 100px;
  border: 2px solid white;
  text-align: center;
}


h2 {
  color: white;
}

p {
  color: white;
}

＆＃13;

<fieldset>
  <legend align="center">
    <h2>MON</h2>
  </legend>
  <p>7am - yeah</p>
  <p>8am - yeah</p>
  <p>9am - yeah</p>
</fieldset>

＆＃13;

Answer 2

看起来你只需要设置透明的背景颜色。

＆＃13;

div {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  background: white;
}

h2 {
  width: 50px;
  margin-top: -15px;
  margin-left: 8px;
  padding: 0 14px 0 10px;
  background: white;
}

＆＃13;

<div>
  <h2>MON</h2>
  <p>7am - yeah</p>
</div>

＆＃13;

用css html将文本放在边框上

2 个答案: