在没有填充的情况下对齐元素

Question

我正在尝试使用div实现完美对齐的表。到目前为止，这就是我所拥有的：

我希望时间部分位于整行的左侧，但文本右对齐以停止创建空格差异，如下所示：

我已尝试使用text-align: right;和direction: rtl并玩更多div，但到目前为止似乎没有任何工作。

相关的html：

<div class="container-fluid">
    <div class="row">
        <div class="header">
            <h1>EVENTS SCHEDULE</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-2"></div>

        <div class="col-lg-8 date">
            <h4>Thursday, January 26th</h4>
        </div>

        <div class="col-lg-2"></div>
    </div>

    <div class="row">
        <div class="col-lg-2"></div>

        <div class="col-lg-8 event">
            <span class="event-time"> 1:00 PM</span>

            <h5 class="event-title">Special Olympics Unified Snowboarding Final</h5>
            <dd>SLOPESTYLE</dd>
        </div>

        <div class="col-lg-2"></div>
    </div>

相关CSS：

.date {
    background: rgba(26, 26, 26, 1);
    color: #fff;
    padding-left: 20px;
}

.event {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding-top: 10px;
    padding-bottom: 10px;
}

.event-time {
    font-size: 20px;
    font-family: "Arial", Arial, sans-serif;
    direction: rtl;
}

.event-title {
    text-align: left;
    line-height: .5em;
    font-size: 20px;
    font-family: "Arial", Arial, sans-serif;
    display: inline-block;
    padding-left: 80px;
}

.event dd {
    display: block;
    font-size: 12px;
    font-family: "Verdana", Verdana, sans-serif;
    padding-left: 150px;
}

Answer 1

由于您使用的是bootstrap类，因此您可能希望尝试使用较低的类进行对齐，因为您显示的屏幕大小可能不会很大。

用col-sm-或col-md替换col-lg-8，所以你的html看起来像

>     var Sheet = 'https://spreadsheets.google.com/feeds/list/SheetKey/od6/public/values?alt=json';
>     
>     function callback(data){
>         var cells = data.feed.entry;
>     .
>     .
>     .