HTML: Tôi có thể đặt văn bản chỉ số ngay dưới phần siêu văn bản không?

Question

Tôi có một từ, trong đó có cả chữ và số dưới. Bây giờ tôi làm cho nó như thế này word<sub>1</sub><sup>2</sup> Và nhận được những điều sau đây:

word12 .

Làm thế nào tôi có thể đặt các chỉ số dưới chính xác?

Answer 1

Vâng, bạn không thể làm điều đó với HTML thuần tuý. Giống như nó đã được đề cập, sử dụng CSS. Nhưng bạn sẽ muốn một số vị trí tốt!

Answer 2

Có nhiều cách bạn có thể làm điều này với CSS và mỗi cách đều có ưu và nhược điểm của chúng. Một cách sẽ là sử dụng vị trí tương đối. Một ví dụ nhanh chóng có thể làm việc như thế này:

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

Và CSS để đi cùng với điều này:

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... */ 
} 

ví dụ cụ thể này sẽ làm việc tốt hơn nếu bạn sử dụng một phông chữ đơn cách.

Answer 3

Đây là giải pháp sạch. Tạo hai lớp CSS:

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

Bạn đã có thể có lớp "nobr" như một <nobr> thay thế. Bây giờ để bày tỏ công thức phân tử cho sulfate, sử dụng lớp "supsub" như sau:

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

Đó là, kèm theo superscript bạn/subscript trong lớp "supsub", và đặt một < br/> giữa chúng. Nếu bạn thích các chữ viết tay/chỉ số của bạn lớn hơn hoặc nhỏ hơn một chút, thì hãy điều chỉnh kích thước phông chữ và sau đó là tinker với chiều thẳng đứng và chiều cao dòng. Các -9em trong thiết lập lề là để giữ cho các superscripts/subscripts từ thêm vào chiều cao của dòng có chứa chúng; bất kỳ giá trị lớn nào cũng sẽ làm.

Answer 4

Sử dụng kiểu bảng CSS (ngoại trừ IE8 trở xuống). 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; 
} 

Fiddle: https://jsfiddle.net/FredLoney/Loxxv769/4/

Bên cạnh việc đơn giản hơn chỉnh vị trí tương đối, giải pháp này tránh biến dạng bố trí phát sinh từ những lựa chọn thay thế. Xem, ví dụ: https://jsfiddle.net/FredLoney/da89nyk2/1/.