时间戳

首页 > 解决方案 > 引导中心和右对齐问题

html - 引导中心和右对齐问题

问题描述

我试图在我的代码中有一个居中日期值和右对齐的编辑链接的行。我不确定这是否最好在一列 div 和 css 或两个 div 中实现（一个 = 11，其他 = 1），但我尝试了第二种方法，它不会在行内居中日期值。有更好的解决方案吗？

电流输出：

截图 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>

标签： htmlcsstwitter-bootstraptwitter-bootstrap-3

解决方案

我推荐这种方法：

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

推荐阅读