如何对齐这个跨度在div的右边？ [英] How to align this span to the right of the div?

问题描述

我有以下HTML：

 < div class =title> 
< span>累积效果< / span> 
< span> 20/02/2011< / span> 
< / div> 
  

使用此CSS：

  .title 
 {
 display：block; 
 border-top：4px solid＃a7a59b; 
 background-color：＃f6e9d9; 
 height：22px; 
 line-height：22px; 
 padding：4px 6px; 
 font-size：14px; 
 color：＃000; 
 margin-bottom：13px; 
 clear：both; 
} 
  

如果你检查这个jsFiddle：
http://jsfiddle.net/8JwhZ/

您可以看到名称&日期粘在一起。有没有办法，我可以得到的日期是正确的？我在第二个< span> 上尝试过 float：right; ，但它拧紧了样式，如果可以修改HTML： net / 8JwhZ / 3 /> http://jsfiddle.net/8JwhZ/3/

 < div class =title> 
< span class =name>累积效果< / span> 
< span class =date> 20/02/2011< / span> 
< / div> 
 
 .title .date {float：right} 
 .title .name {float：left} 
  

I have the following HTML:

<div class="title">
    <span>Cumulative performance</span>
    <span>20/02/2011</span>
</div>

with this CSS:

.title
{
    display: block;
    border-top: 4px solid #a7a59b;
    background-color: #f6e9d9;
    height: 22px;
    line-height: 22px;
    padding: 4px 6px;
    font-size: 14px;
    color: #000;
    margin-bottom: 13px;
    clear:both;
}

If you check this jsFiddle: http://jsfiddle.net/8JwhZ/

you can see that the Name & Date are stuck together. Is there a way that I can get the date to align to the right? I've tried float: right; on the second <span> but it screws up the style, and pushes the date outside of the enclosing div

解决方案

If you can modify the HTML: http://jsfiddle.net/8JwhZ/3/

<div class="title">
  <span class="name">Cumulative performance</span>
  <span class="date">20/02/2011</span>
</div>

.title .date { float:right }
.title .name { float:left }

这篇关于如何对齐这个跨度在div的右边？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！