Центр начальной загрузки и проблема выравнивания прав - PullRequest
Новая
       6

Центр начальной загрузки и проблема выравнивания прав

0 голосов
/ 27 декабря 2018

Я пытаюсь, чтобы в моем коде была строка, центрированная по дате, а ссылка для редактирования выровнена по правому краю.Я не уверен, что это лучше всего достигается в одном столбце div и css или двух div (один = 11, другой = 1), но я попробовал второй подход, и он не центрирует значение даты в строке.Есть ли лучшее решение?

Токовый выход:

screenshot html

Текущий html: 

<div className="row">
        <div className="col-md-10">
            <p className="text-center"><b>12/25/18</b></p>
        </div>
        <div className="col-md-1">
            <a href="/app/annotation/edit/id" className="annotation-kanban-card__head-edit-link"><span className="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
        </div>
    </div>

1 Ответ

0 голосов
/ 27 декабря 2018

Я бы порекомендовал этот подход: 

<div className="row">
    <div className="col-md-12 title-with-button">
        <p className="text-center"><b>12/25/18</b></p>
        <a href="/app/annotation/edit/id" className="annotation-kanban-card__head-edit-link"><span className="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
    </div>
</div>

Со следующим CSS: 

.title-with-button {
  position: relative;
}

.title-with-button {
  position: absolute;
  top: 0;
  right: 0;
}

CSS для этого достаточно минимален, и в зависимости от длины заголовка следуетработать отзывчиво.Кроме того, он удаляет некоторые ненужные теги div для более чистого HTML.

...