与CSS并排放置文字

马修·努格罗霍·阿里扬托

我想用html这样的图像制作一个字母模板，如下图所示，其中将从数据库中填充nama siswa，并且正如我们所看到的，冒号始终在同一行中。

我试过了

<div class="row">
    <dl class="dl-horizontal">
        <dt>Kelas :</dt><dd>X TIK 1</dd>
        <dt>Wali Kelas :</dt><dd>Mitra Mulyani</dd>
        <dt>Jumlah Siswa :</dt><dd>0</dd>
    </dl>
</div>

并使用boostrap CSS，但不适合我的需要。引导程序的结果是这样的，如何使用css？

天才谢谢你

用弹性盒来实现它。谢谢

.d-flex p{
width:110px}

.d-flex{
display:flex
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="col-sm-12">
    <div class="d-flex">
      <p>Kelas </p>
      <p>:X TIK 1</p>
    </div>
    <div class="d-flex">
      <p>Wali Kelas </p>
      <p>:Mitra Mulyani</p>
    </div>
    <div class="d-flex">
      <p>Jumlah Siswa </p>
      <p>:0</p>
    </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。