HTML : 위 첨자 바로 아래에 아래 첨자 텍스트를 놓을 수 있습니까?

Question

나는 위 첨자와 아래 첨자가 모두있는 단어가 있습니다. 이제 이것을 이렇게 렌더링합니다 word<sub>1</sub><sup>2</sup> 다음을 얻습니다.

word12 .

위 첨자 아래에 정확히 아래 첨자를 넣을 수 있습니까?

Answer 1

글쎄, 당신은 일반 바닐라 HTML로 할 수 없습니다. 언급 된 것처럼 CSS를 사용하십시오. 그러나 당신은 어떤 포지셔닝을 원할 것입니다!

Answer 2

CSS로이 작업을 수행하는 방법에는 여러 가지가 있으며, 각각 장단점이 있습니다. 한 가지 방법은 상대 위치 지정을 사용하는 것입니다. 빠른 예는 다음과 같이 작동 할 수 있습니다 :

<span class="fraction"> 
    <span class="numerator">3</span> 
    <span class="denominator">4</span> 
</span> 

그리고 CSS를이와 함께 갈 : 당신이 고정 폭 글꼴을 사용하는 경우

span.fraction { } 

/* Or child selector (>) if you don't care about IE6 */ 
span.fraction span.numerator { 
    position:relative; 
    top:-0.5em; 
} 

span.fraction span.denominator { 
    position:relative; 
    top:0.5em; 
    left:-0.5em; /* This will vary with font... */ 
} 

이 특정 예제는 잘 작동합니다.

Answer 3

다음은 깨끗한 해결책입니다. 두 CSS 클래스를 만들기 : 당신은 이미 < > nobr 교체로 "nobr"클래스가있을 수 있습니다

.nobr { 
    white-space: nowrap; 
} 
.supsub { 
    display: inline-block; 
    margin: -9em 0; 
    vertical-align: -0.55em; 
    line-height: 1.35em; 
    font-size: 70%; 
    text-align: left; 
} 

. 이제 황산의 분자식을 표현하기 위해, 다음과 같이 "supsub"클래스를 사용은 "supsub"클래스 내에서 첨자/아래 첨자를 둘러싸, 그 사이에 < BR/>을 넣어

<span class="nobr">SO<span class="supsub">2-<br />4</span></span> 

. 위 첨자/아래 첨자가 조금 더 크거나 작다면 글꼴 크기를 조정 한 다음 수직 정렬 및 선 높이로 조정하십시오. 여백 설정의 -9em은 위 첨자/아래 첨자가 포함 된 행의 높이에 추가되지 않도록 유지하는 것입니다. 어떤 큰 가치가있을 것입니다.

Answer 4

CSS 테이블 스타일을 사용하십시오 (IE8 이하 제외). HTML :

<span class="over-under"> 
    <span class="over">sup</span> 
    <span class="under">sub</span> 
</span> 

CSS :

span.over-under { 
    position: relative; 
    top: 1em; 
    display: inline-block; 
} 
span.over-under > .over { 
    display: table-row; 
} 
span.over-under > .under { 
    display: table-row; 
} 

바이올린 : https://jsfiddle.net/FredLoney/Loxxv769/4/

상대 위치 비틀기보다 간단되고 게다가,이 솔루션이 그 대안에서 발생 레이아웃 왜곡을 방지 할 수 있습니다. 예를 들어, https://jsfiddle.net/FredLoney/da89nyk2/1/을 참조하십시오.