Question

我有这个用HTML和CSS实现的图像。

enter image description here

这就是我的尝试。

    <span>$</span><span style="font-size: 50px;">99</span><span style="vertical-align: text-top;">00</span>

但实际上这并不像我想要的那样。

Answer 1

例如：

＆＃13;

.price {
  font-size: 80px;
  color: #f60;
}
.price sup {
  font-size: 38px;
}
.price sub {
  font-size: 28px;
  color: #aaa;
  position: absolute;
  display: inline-block;
  margin: 48px 0 0 -40px;
}

＆＃13;

<span class="price"><sup>$</sup>99<sup>00</sup><sub>/month</sub></span>

＆＃13;

http://jsfiddle.net/1zjuddj8

Answer 2

听起来标签就是你的朋友。 标记中的任何文字都将成为上标。

示例

$9900

w3.org的其他文档/参考： http://www.w3.org/TR/html-markup/sup.html

Answer 3

您有一个特定的标记，可以让您的文字显示在最顶层使用，将其视为一个indice，作为一个注释。要强制对齐，您必须使用px或％中的vertical-align值。 `

<sup style="vertical-align: 10;">$</sup><sub style="font-size: 50px;vertical-align:-10">99</sub><sup style="vertical-align: 10;">00</sup>

Answer 4

您可以使用sup制作文字上标，然后使用position: relative和top设置文字的位置：

HTML：

<h1><sup>$</sup>99<sup>00</sup></h1>

CSS：

h1 { font-size: 50px; }
sup { font-size: 15px; 
   position: relative; 
   line-height: 0;
   vertical-align: baseline;
   top: -23px;
}

JS Fiddle

Answer 5

另一种解决方案：

＆＃13;

body {
  font-size: 20px;
}
.div-table {
  display: table;
  border-collapse: collapse;
}
.div-table .div-table-row {
  display: table-row;
}
.div-table .div-table-cell {
  display: table-cell;
  text-align: left;
  vertical-align: top;
}
.big-number {
  font-size: 50px;
}
.padding-top {
  padding-top: 5px;
}

＆＃13;

<div class="div-table">
  <div class="div-table-row">
    <div class="div-table-cell padding-top">
      $
    </div>
    <div class="div-table-cell">
      <span class="big-number">99</span>
    </div>
    <div class="div-table-cell padding-top">
      <div>00</div>
      <div>/month</div>
    </div>
  </div>
</div>

＆＃13;

http://jsfiddle.net/gbx0ogqm/

Answer 6

需要更多微调但需要大量控制的解决方案，对前端布局非常有用：

HTML代码

<div class="price_tag">
    <div class="price"><sup>$</sup><span class="bignum">99</span><sup>00</sup>
</div>
    <div class="month">/month</div>
</div>

CSS代码

    .price_tag {
    position:relative;
    width:190px;
    height:100px;
    color:#f90;
    font-size:6em;
    font-family:helvetica, arial, sans-serif;
}
.price {
    position:relative;
    width:200px;
    height:100px;
    font-weight:bold;
}
sup {
    position:relative;
    font-size:2.5rem;
    top:1rem
}
.month {
    width:60px;
    height:30px;
    color:#ccc;
    font-size:1rem;
    right:0;
    bottom:0;
    z-index:3;
    position:absolute;
}

fiddle here

Answer 7

要准确地复制它，您的代码必须更多地参与其中。我试图尽可能地匹配它：http://jsfiddle.net/wvcm92ka/

代码如下：

HTML：

<div class="amount">
    <div class="amount-parts">
        <div class="amount-currency">$</div>
        <div class="amount-whole">99</div>
        <div style="clear: left;"></div>
    </div>
    <div class="amount-parts">
        <div class="amount-decimal">00</div>
        <div class="amount-period">/month</div>
        <div style="clear: left;"></div>
    </div>
    <div style="clear: left;"></div>
</div>

CSS：

.amount-parts{
    font-family: verdana, sans-serif;
    float: left;
}
.amount-currency, .amount-whole, .amount-decimal, .amount-period{
    font-weight: 600;
}
.amount-currency, .amount-whole, .amount-decimal{
    color: #ff0000;
}
.amount-currency{
    float: left;
    font-size: 32pt;
    font-weight: bold;
    margin-top: 5px;
}
.amount-whole{
    font-size: 60pt;
    float: left;
}
.amount-decimal{
    color: #ff0000;
    font-size: 24pt;
    font-weight: bold;
    margin-top: 15px;
}
.amount-period{
    color: #999;
    font-size: 10pt;
    font-weight: bold;
}

如何在HTML和CSS中完成此图像？

7 个答案: