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