HTML выравнивание и интервал (без CSS) - PullRequest
Новая
       10

HTML выравнивание и интервал (без CSS)

0 голосов
/ 29 февраля 2020

У меня есть следующий фрагмент кода. 

<div class="row no-gutters">

 <div class="col-6 text-right text-uppercase font-weight-lighter" style="letter-spacing: 1px;">
   placeholder
 <i class="fa fa-caret-right fa-xs"></i>
 
 </div>
 
 <div class="col-6 text-uppercase font-weight-lighter">placeholder</div>
                      
</div>

У меня есть 2 вопроса об этом куске кода:

  1. Как выровнять текст (заполнитель) по значку?

  2. Как добавить интервал между двумя частями текста и значком?

(весь код находится внутри блока карты )

Я использую старую версию HTML (до HTML5) и не могу использовать CSS. (это мой первый раз, когда я действительно углубляюсь в HTML, мои извинения, если мой код ужасен)

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 29 февраля 2020

Вы можете использовать bootstrap для выравнивания и интервала.

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap spacing</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  </head>
  <body>
    <div class="row no-gutters">
      <div class="col-3 text-right text-uppercase font-weight-lighter" style="letter-spacing: 1px;">
        placeholder
      </div>
      <div class="col-3 text-right text-uppercase font-weight-lighter" style="letter-spacing: 1px;"></div>
      <div class="col-3">
        <i class="fa fa-caret-right fa-xs"></i>
      </div>
      <div class="col-3 text-uppercase font-weight-lighter">placeholder</div>
    </div>
  </body>
</html>
0 голосов
/ 29 февраля 2020

вы используете bootstrap класс в вашем коде, и если вы вставите bootstrap файл в ваш html, вы можете использовать эти стили с классом.

Где свойство является одним из:

m - для классов, которые устанавливают поле p - для классов, которые устанавливают отступ Где стороны это одно из:

t - для классов, которые устанавливают margin-top или padding-top b - для классов, которые устанавливают margin-bottom или padding-bottom l - для классов, которые устанавливают margin-left или padding-left r - для классов, которые устанавливают margin-right или padding-right x - для классов которые устанавливают и * -left, и * -right y - для классов, которые устанавливают как * -top, так и * -bottom blank - для классов, которые устанавливают поля или отступы на всех 4 сторонах элемента

...