写在 div issue 因为 after/before in css

Question

我有一个代码可以用 html 和 css 创建便签。但是我想在黄色区域写任何东西时遇到问题。

#slm {
  width: 200px;
  vertical-align:100%;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  positon: relative;
}
#slm:before {
  content: '';
  display: block;
  positon: absolute;
  width: 50px;
  height: 170px;
  border-radius: 0 0 80% 0/0 0 50% 0;
  background-color: white;
}

<div id="slm">
   
      slm<br>
      Hi
</div>

谢谢。

Answer 1

我认为您正在寻找这样的解决方案：https://jsfiddle.net/neya0v76/4/

将文本包裹在 <p> 标记中并将其设置到 absolute 位置，如下所示：

HTML

<div id="slm">
  <p>slm<br> Hi</p>
</div>

CSS

#slm p {
  position: absolute;
  top: 0;
  left: 70px;
}

Answer 2

首先，您的格式有错字position。

使用 absolute 将文本定位在 sticky 区域内，方法是将其包裹在 div 中。

#slm {
  width: 200px;
  vertical-align:100%;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  position: relative;
}
#slm:before {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 170px;
  border-radius: 0 0 80% 0/0 0 50% 0;
  background-color: white;
}

.text{
      position: absolute;
    top: 10px;
    left: 54px;
    width: 140px;
}

<div id="slm">
   <div class="text">
      slm<br>
      Hi
   </div>
</div>

Answer 3

尝试以下操作：

#slm {
  width: 200px;
  vertical-align:100%;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  position: relative;
}
#slm:before {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 170px;
  border-radius: 0 0 80% 0/0 0 50% 0;
  background-color: white;
}
.text{
  top: 35px;
  position: absolute;
  position: inherit;
  text-align: center;
}

<div id="slm">
      <div class="text">slm</div>
      <div class="text">hi</div>
</div>

Answer 4

首先，您的代码中有一个拼写错误：您写的是 positon 而不是 position！

其次，您需要为 css.

中的两个 ID 定义 "position" 规则的顶部和左侧属性

然后我会向 #slm 元素添加一些填充，并减少一些宽度。那应该会给你你想要的结果：

示例：https://jsfiddle.net/0wrkzvzp/

#slm {
  width: 120px;
  vertical-align:100%;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  position: relative;
  top:0; left:0;
  padding-left: 80px;
}
#slm:before {
  content: '';
  display: block;
  position: absolute;
  top:0; left:0;  
  width: 50px;
  height: 170px;
  border-radius: 0 0 80% 0/0 0 50% 0;
  background-color: white;
}

Answer 5

您必须使用 position 而不是 positon！

最好为您的文本准备一些容器。

试试这个：

HTML:

<div id="slm">
  <div class="inner">
    slm
    <br>
    hi
  </div>
</div>

CSS:

#slm {
  width: 200px;
  vertical-align:100%;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  position: relative;
}
#slm:before {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 170px;
  border-radius: 0 0 80% 0/0 0 50% 0;
  background-color: white;
}

#slm .inner{
  width: 180px;
  margin-left: 55px;
}

工作示例：https://jsfiddle.net/jxsrp86t/2/

写在 div issue 因为 after/before in css

write in div issue because of after/before in css

html

css

css-position

pseudo-element