HTML日期顯示對齊

Question

我正在設計一個網頁，其日期列表顯示在另一個下方。 我想對齊日期，使它們彼此之間完美對齊。 我已經嘗試過使用align，但是並沒有什么不同。 我也嘗試放置樣式標簽，但出現錯誤，提示：“在這種情況下，不允許將元素“ style”作為元素“ div”的子元素。”

這是頁面的代碼：

<div class="report-title">
    <h1>Response Tracking Report</h1>
</div>
<div class="info">
    <div style="width:93%;float:left;">
        <p class="title">Project: </p>
        <p class="value"><?php echo $response_data['project_name']; ?></p>
    </div>
    <div class="spacer"></div>
    <div style="width:7%;float:left;">
        <p class="value"><?php echo date("Y-m-d"); ?></p>
    </div>
    <div class="bottom"></div>
</div>
<div id='response-info' class='info'>
    <div style='width:100%;'>
        <p class='title'>Risk Statement: </p>
        <p id='risk_statement' class='value'><?php echo $response_data['risk_statement']; ?></p>
        <br/><br/>
    </div>
    <div style='width:24%;float:left;'>
        <p class='title'>WBS: </p><p class='value'><?php echo $response_data['WBS']; ?></p>
        <br/><br/>
        <p class='title'>Date of Plan: </p><p class='value' ><?php echo $response_data['date_of_plan']; ?></p>
        <br/><br/>
        <p class='title'>Last Updated: </p><p class='value' ><?php echo $response_data['date_of_update']; ?></p>
        <br/><br/>
        <p class='title'>Planned Closure: </p><p class='value' ><?php echo $response_data['planned_closure']; ?></p>
    </div>
    <div class='spacer' style='width:1%;float:left;height:1px;'></div>
    <div style='width:24%;float:left;'>
        <p class='title'>Owner: </p><p class='value'><?php echo $response_data['owner']; ?></p>
        <br/><br/>
        <p class='title'>Cost: </p><p class='value'>$<?php echo round($response_data['cost']); ?></p>
        <br/><br/>
        <p class='title'>Release Progress: </p><p class='value'><?php echo $response_data['release_progress']; ?></p>
        <br/><br/>
        <p class='title'>Action: </p><p class='value'><?php echo $response_data['action']; ?></p>
    </div>
    <div class='spacer' style='width:1%;float:left;height:1px;'></div>
    <div style='width:50%;float:left;'>
        <p class='title'>Current Status: <br/> </p><p class='value'><?php echo $response_data['current_status']; ?></p>
        <br/>
        <br/>
        <p class='title'>Action Plan: <br/> </p><p class='value'><?php echo $response_data['action_plan']; ?></p>
    </div>
    <div id='bottom' style='clear:both;width:100%'></div>
</div>
<div id="ResponseUpdateTableContainer" class="jTableContainer" style="width:100%;"></div>
</body>

當前如何顯示日期： http ： //imgur.com/UxbugwX

我如何嘗試獲取它們： http ： //imgur.com/mAgfRYO

我是html的新手，請原諒我的錯誤。 非常感謝所有幫助。

Answer 1

為了使那些DIV's對齊，您需要給它們相同的寬度，這是當您有動態文本時，問題是長度超出了您已經指定的寬度。

一種解決方案是模擬本機table樣式，並在css display屬性
例如：

.table { display: table;      }
.row   { display: table-row;  }
.cell  { display: table-cell; }

然后，您的html將具有與此標記相似的內容：

<div class="table">
    <div class="row">
        <span class="cell title">WBS:</span>
        <span class="cell value">1.1</span>
    </div>
    <div class="row">
        <span class="cell title">Planned Closure:</span>
        <span class="cell value">2014-07-18</span>
    </div>
    <div class="row">
        <span class="cell title">Last Updated:</span>
        <span class="cell value">2014-09-10</span>
    </div>
    <div class="row">
        <span class="cell title">Date of Plan:</span>
        <span class="cell value">2014-04-26</span>
    </div>
</div>

jsFiddle示例： http : //jsfiddle.net/gmolop/csx10g64/

Answer 2

使用此代碼，日期將對齊：

HTML：

<div class="container">
    <div class="title">Date of Plan:</div>
    <div class="date">2014-04-26</div>
</div>
<div class="container">
    <div class="title">Last Updated:</div>
    <div class="date">2014-09-10</div>
</div>
<div class="container">
    <div class="title">Planned Closure:</div>
    <div class="date">2014-07-18</div>
</div>

CSS：

.container {
     width: 600px;
}

.title {
    width: 180px;
    display: inline-block;
}

.date {
    width: 180px;
    display: inline-block;
}

您可以在這里查看結果： http : //jsfiddle.net/ben220/fuzhvL54/

希望對您有所幫助。

Answer 3

我可以使用margin-left解決問題，直到日期對齊為止。