由於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>