HTML日期显示对齐

Question

我正在设计一个网页，其中有一个日期列表出现在另一个下面。我想调整日期，使它们完美地排列在彼此之下。我尝试使用对齐，但它没有任何区别。我也尝试了一个样式标签，但我得到一个错误，说： “元素”风格“不允许作为元素的子元素”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

我能够解决问题，使用余裕，调整它，直到日期对齐。

Answer 2

为了让这些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 3

有了这个代码，日期将对齐：

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/

我希望它能帮助。