Как исправить ошибку форматирования номера пробела на веб-странице? - PullRequest
Новая
       5

Как исправить ошибку форматирования номера пробела на веб-странице?

0 голосов
/ 16 января 2020

Я хочу выровнять текст на моей веб-странице следующим образом:

Дата выпуска: 03.12.2009
Дата исполнения: 04.02.2009
Net: 12
PO #: 1 / 3-147

Но я получаю это так:

Дата выпуска: 12.03.2009
Срок оплаты: 04/02/2019
Net: 12 PO #: 1 / 3-147

Как реализовать первый формат без жесткого кодирования количества пробелов без жесткого кодирования количества пробелов?

Ответы [ 2 ]

1 голос
/ 16 января 2020

Вы должны использовать некоторые HTML теги, такие как div, span и применить к ним CSS, что-то вроде этого будет работать: 

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            float: left;
        }
    </style>
</head>
<body>

    <div>
        Issue-Date:
    </div>
    <div>
        03/12/2019
    </div>
</body>
</html>
0 голосов
/ 16 января 2020

Учитывая значимую разметку, такую ​​как список описания, вы можете использовать display: grid для достижения этого макета

Таким образом, вам не нужно устанавливать width (или min-width) для элемент слева и колонка автоматически адаптируются 

dl {
   display: grid;
   grid-template-areas: "c1 c2";
   grid-auto-columns: min-content;
}

dt,dd { margin: 0; }

dt { grid-area: "c1"; white-space: nowrap; }
dd { grid-area: "c2"; padding-left: 10px; }
<dl>
   <dt>Issue-Date</dt>    
   <dd>03/12/2019</dd>
   
   <dt>Due Date</dt>      
   <dd>04/02/2019</dd>
   
   <dt>Net:</dt>               
   <dd>12</dd>
   
   <dt>A really long item</dt>          
   <dd>1/3-147</dd>

   <dt>P.O #</dt>          
   <dd>1/3-147</dd>
</dl>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...