p内容垂直HTML5和叠加

Question

实现这个的一些方法？从我所看到的是必须使用javascript但仍然没有看到如何。

代码：http://codepen.io/gcpmendez/pen/mEmzPa

html：

 <div class="languages-list" style=" padding-top: 10px; padding-bottom: 10px;">
        <span >L<sub>1</sub> </span>
        <p class="form-control"> </p>
        <button  id="alphabet-language-1">Σ<sub>1</sub> </button>
    </div>`

的CSS：

.languages-list p {
 width:300px;
    height: 300px;
    border-radius:100%;
    border: 1px solid #000;
  position:absolute; overflow:hidden;
  float:left; top:100px; left:100px;

  text-align: center;
}

.languages-list span {
    position:absolute; 
    float:left; top:80px; left:245px;
}
.languages-list button {
 width:70px;
    height: 70px;
    border-radius:100%;
    border: 1px solid #000;
  position:absolute; overflow:hidden;
      float:left; top:110px; left:320px;
}

Answer 1

我认为这就是你想要的https://jsfiddle.net/7ku7qvfx/13/

删除text-align: center，然后添加padding-left。

.languages-list p {
  font-size: 25px;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  border: 1px solid #000;
  position: absolute;
  overflow: hidden;
  float: left;
  top: 100px;
  left: 100px;
  padding-left: 140px;
  //text-align: center;
}