签名和日期条不对齐

Question

我试图在我用HTML创建的证书上签名和日期对齐（但会打印出来）。

目前看来，这些字段都会折叠成多行，我希望它们都在同一行上，如下所示：

以下是代码：

＆＃13;

＆＃13;

.sign {font-weight:bold;}
.sign span {width:7cm;border-bottom:0.1em solid #000;display:block;}

＆＃13;

<div class="sign">
    Signature:<span></span>Date:<span></span>(dd mon yyyy)
</div>

＆＃13;

＆＃13;

＆＃13;

我知道解决方案很简单，我现在无法直接思考！

Answer 1

您需要使用display:inline-block代替block。 inline-block可让您轻松保持同一条线。

＆＃13;

＆＃13;

.sign {font-weight:bold;}
.sign span {width:3cm;border-bottom:0.1em solid #000;display:inline-block;}

＆＃13;

<div class="sign">
    Signature:<span></span>Date:<span></span>(dd mon yyyy)
</div>

＆＃13;

＆＃13;

＆＃13;

（请注意，对于此示例，我将其缩小到3厘米，以便它适合代码段）

Answer 2

您需要inline-block使用display属性而不是block。

Answer 3

你只需要显示它们inline-block我已经添加了边距来创建所需的结果

＆＃13;

＆＃13;

.sign {
  font-weight: bold;
}
.sign span {
  width: 4cm;
  border-bottom: 0.1em solid #000;
  display: inline-block;
  margin-right: 18px;
}

＆＃13;

<div class="sign">
  Signature:<span></span>Date:<span></span>(dd mon yyyy)
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

<强> HTML

<div class="sign">
  Signature: <span></span> Date: <span></span>
</div>

<强>的CSS

.sign {
  font-wight: bold;
}
.sign span {
  width: 150px;
  display: inline-block;
  border-bottom: 1px solid #999999;
  font-weight: normal;
}

Fiddle Demo