HTML日期顯示對齊

我正在設計一個網頁，其中有一個日期列表出現在另一個下面。我想調整日期，使它們完美地排列在彼此之下。我嘗試使用對齊，但它沒有任何區別。我也嘗試了一個樣式標籤，但我得到一個錯誤，說：「元素」風格「不允許作爲元素的子元素」div「在這種情況下。」HTML日期顯示對齊

這裏的頁面代碼：

<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，以便請原諒我的錯誤。所有的幫助非常感謝。

來源

2014-09-10 shhasan

如果他們坐在一個div上，你可以使用'float：right'，這樣他們全都坐在'div'的右邊，如果你願意的話，你可以使用margin來將它推回去想。但既然我們知道div的右邊將是一條平坦的線，我們可以根據它排列它們。合理？ – Austin 2014-09-10 19:58:11

爲什麼不使用表格？ – 9997 2014-09-10 20:02:23

我嘗試過'float：right'，但沒有正常工作。 http://imgur.com/3nqPjJO – shhasan 2014-09-10 20:05:57

我能夠解決問題，使用餘裕，調整它，直到日期對齊。

來源

2014-09-16 19:33:12 shhasan

爲了讓這些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/

來源

2014-09-10 20:14:16 gmo

我試過你的建議。但它並沒有真正奏效。顯示：http：//imgur.com/i7xRJBm，代碼：http://imgur.com/wrHImAE – shhasan 2014-09-10 21:04:05

圖片非常困難...你能在一個小提琴文件中重現你的代碼嗎？這樣做會更容易。 – gmo 2014-09-10 22:30:32

有了這個代碼，日期將對齊：

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/

我希望它能幫助。

來源

2014-09-10 21:58:02

HTML日期顯示對齊

回答

相關問題