因为在css之后/之前写入div问题

Question

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

感谢。

Answer 1

首先，你的代码中有一个拼写错误：你已经写了位置而不是位置！

其次，你需要定义顶部＆amp;将属性留给＆＃34;位置＆＃34;您的css中ID的规则。

然后我会在#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 2

我认为您正在寻找这样的解决方案：

将文字包装在<p>标记中并将其设置为absolute位置，如下所示：

HTML

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

CSS

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

Answer 3

首先，你有position样式的拼写错误。

通过将文本包装在div中，absolute区域内的sticky文本位置。{/ p>

#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 4

您必须使用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/

Answer 5

尝试以下方法：

#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>