Блог

Главная - Вопросы по программированию - Поместить текст рядом с CSS

Поместить текст рядом с CSS

#html #css

#HTML #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, но это не соответствует моим потребностям.
Результат с bootstrap выглядит следующим образом
введите описание изображения здесь
как это сделать с помощью css?

Комментарии:

1. Покажите нам, что вы уже сделали для достижения этого и с какими проблемами вы сталкиваетесь в этом?

2. пожалуйста, добавьте свой код, чтобы мы могли проверить, что происходит не так. Спасибо

3. смотрите мой обновленный вопрос

4. @MatiusNugrohoAryanto Я обновил ваш код, чтобы получить желаемое отображение. Пожалуйста, проверьте мой ответ ниже.

Ответ №1:

для этого использовал flex box. Спасибо

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

Ответ №2:

Вот HTML-код.

 <div class="row">
   <table>
     <tr>
       <td>Kelas</td>
       <td>:</td>
       <td>X TIK 1</td>
     </tr>
     <tr>
       <td>Wali Kelas</td>
       <td>:</td>
       <td>Mitra Mulyani</td>
     </tr>
     <tr>
       <td>Jumlah Siswa</td>
       <td>:</td>
       <td>0</td>
     </tr>
   </table>
</div>

Вот код CSS.

 td:first-child {
  text-align: right;
  font-weight: bold;
}
td:last-child {
  padding-left: 15px;
  color: #555;
}

Ответ №3:

Поскольку вы используете Bootstrap 3, вы можете использовать definition lists для отображения ваших данных. Ссылка для ссылки:https://getbootstrap.com/docs/3.3/css/#horizontal-description

Ниже приведен ваш обновленный код. Вам нужно будет просмотреть страницу полностью, чтобы увидеть желаемый результат.

 .dl-horizontal dt::after {
  content: ":";
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px
}

@media (min-width: 768px) {
  .dl-horizontal dd {
    margin-left: 170px !important;
  }
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>

Если вам также нужно горизонтальное отображение в мобильном режиме просмотра, вы можете обновить пользовательский CSS:

 .dl-horizontal dt {
    float: left;
    width: 130px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}