文本不包含div内部

Question

我需要使用id =＆＃39; form1＆＃39;来获取div的文本。和id =＆＃39; form2＆＃39;适合他们各自的容器。目前，数字40应该在左侧的白色框内，但由于某种原因，它被推下来。我尝试在form1 / form2中插入span和div标签，但它没有做任何事情。我也尝试在CSS中使用自动换行，没有任何改变。

＆＃13;

＆＃13;

.form1{
    width: 20%;
    height: 8%;
    float: left;
    background: white;
    margin-top: 55%;
    border-radius: 0px 20px 20px 0px;
    opacity: .5;
    position: absolute;
}
.form2{
    width: 20%;
    height: 8%;
    float: right;
    margin-top: 55%;
    background: white;
    border-radius: 20px 0px 0px 20px;
    opacity: .5;
}
.box1{
    width: 60%;
    height: 50%;
    background: url(http://i.imgur.com/lpaxZUu.png) center no-repeat ;
    vertical-align:center;
    position: absolute;
    margin: 30% 20%;

}
 #container
{
    width: 10em;
    height: 12em;
    font-size: 2em;
    text-align: center;
    line-height: 5em;
    margin: 3em auto;
    border: 2px solid #666;
    border-radius: 7px;
    position: relative;
    overflow: hidden;

}
#container:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(http://i.imgur.com/opsUkHF.png) center ;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s
    -o-transition: all 1s;
    transition: all 1s;
}
.transform:before {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
.text1{
    width: 100%;
    height: 100%;
    background: black;
    position: absolute;
    font-size: 20px;
     display: inline-block;
}

＆＃13;

<div id="container">
 <div class='form1'>40</div>  
 <div class="box1"></div>
 <div class='form2'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

以下是用于说明代码的jsfiddle：https://jsfiddle.net/xffc49qL/8/

Answer 1

您的form1容器行高是您的文本开箱即用的原因。将其更改为 line-height：normal ，它应该返回form1中的内容。此外，绝对对您的情况没有任何影响，因为元素已经浮动。

您需要更改的是form1元素line-height。

.form1 {
  width: 20%;
  height: 8%;
  float: left;
  background: white;
  margin-top: 55%;
  border-radius: 0px 20px 20px 0px;
  opacity: .5;
  line-height: normal;
}
.form2 {
  width: 20%;
  height: 8%;
  float: right;
  margin-top: 55%;
  background: white;
  border-radius: 20px 0px 0px 20px;
  opacity: .5;
}
.box1 {
  width: 60%;
  height: 50%;
  background: url(http://i.imgur.com/lpaxZUu.png) center no-repeat;
  vertical-align: center;
  position: absolute;
  margin: 30% 20%;
}
#container {
  width: 10em;
  height: 12em;
  font-size: 2em;
  text-align: center;
  line-height: 5em;
  margin: 3em auto;
  border: 2px solid #666;
  border-radius: 7px;
  position: relative;
  overflow: hidden;
}
#container:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(http://i.imgur.com/opsUkHF.png) center;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s -o-transition: all 1s;
  transition: all 1s;
}
.transform:before {
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.text1 {
  width: 100%;
  height: 100%;
  background: black;
  position: absolute;
  font-size: 20px;
  display: inline-block;
}

<div id="container">
  <div class='form1'>40</div>
  <div class="box1"></div>
  <div class='form2'></div>
</div>

Answer 2

使用位置：绝对将变量修复到特定位置

＆＃13;

＆＃13;

#test{
  position:absolute;
  margin-top:-62px;
  margin-left:-10px;
  }

.form1{
    width: 20%;
    height: 8%;
    float: left;
    background: white;
    margin-top: 55%;
    border-radius: 0px 20px 20px 0px;
    opacity: .5;
    position: absolute;
}
.form2{
    width: 20%;
    height: 8%;
    float: right;
    margin-top: 55%;
    background: white;
    border-radius: 20px 0px 0px 20px;
    opacity: .5;
}
.box1{
    width: 60%;
    height: 50%;
    background: url(http://i.imgur.com/lpaxZUu.png) center no-repeat ;
    vertical-align:center;
    position: absolute;
    margin: 30% 20%;

}
 #container
{
    width: 10em;
    height: 12em;
    font-size: 2em;
    text-align: center;
    line-height: 5em;
    margin: 3em auto;
    border: 2px solid #666;
    border-radius: 7px;
    position: relative;
    overflow: hidden;

}
#container:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(http://i.imgur.com/opsUkHF.png) center ;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s
    -o-transition: all 1s;
    transition: all 1s;
}
.transform:before {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
.text1{
    width: 100%;
    height: 100%;
    background: black;
    position: absolute;
    font-size: 20px;
     display: inline-block;
}

＆＃13;

<div id="container">
 <div class='form1'><div id='text1'><span id="test">40</span></div></div>  
 <div class="box1"></div>
 <div class='form2'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在margin-top: -64px;中添加#test以将其置于框

中

＆＃13;

＆＃13;

.form1{
    width: 20%;
    height: 8%;
    float: left;
    background: white;
    margin-top: 55%;
    border-radius: 0px 20px 20px 0px;
    opacity: .5;
    position: absolute;
}
.form2{
    width: 20%;
    height: 8%;
    float: right;
    margin-top: 55%;
    background: white;
    border-radius: 20px 0px 0px 20px;
    opacity: .5;
}
.box1{
    width: 60%;
    height: 50%;
    background: url(http://i.imgur.com/lpaxZUu.png) center no-repeat ;
    vertical-align:center;
    position: absolute;
    margin: 30% 20%;

}
 #container
{
    width: 10em;
    height: 12em;
    font-size: 2em;
    text-align: center;
    line-height: 5em;
    margin: 3em auto;
    border: 2px solid #666;
    border-radius: 7px;
    position: relative;
    overflow: hidden;

}
#container:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(http://i.imgur.com/opsUkHF.png) center ;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s
    -o-transition: all 1s;
    transition: all 1s;
}
.transform:before {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
.text1{
    width: 100%;
    height: 100%;
    background: black;
    position: absolute;
    font-size: 20px;
    display: inline-block;
}
#test
{
    margin-top: -64px;
}

＆＃13;

<div id="container">
 <div class='form1'><div id='text1'>40</div></div>  
 <div class="box1"></div>
 <div class='form2'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你能解释一下你使用线高的原因吗？如果删除行高，则代码可以正常工作。试试小提琴。在#container样式中注释掉行高。文本“0”将在form1和form2中移动。