由于css中的之前/之后在div问题中写

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

首先，您的代码中有一个错字：您写的是positon而不是位置！

其次，您需要为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

我认为您正在寻找这样的解决方案： 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 3

首先，您在样式position有错别字。

通过将文本包装在div中，在sticky区域内使用文本的absolute定位。

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