在IE7上创建“换行符”？

Question

我有this代码：

<div class="richiedi_info_item">
    <label>Message</label>
    <span style="color:Red;">&nbsp;*</span>                                                                
    <div class="richiedi_info_item_nota">     
        <a id="notaInfo" href="javascript:void(0);">Click</a>            
    </div>
</div>

.richiedi_info_item_nota
{
    float:right;
    width:252px;    
}

.richiedi_info_item
{
    margin-top:15px;   
    width:400px; 
}

.richiedi_info_item label
{
    float:left;
    height:16px;
    line-height:20px;
}

和（在每个浏览器上都期望IE7）文本Message和链接Click在同一行上对齐。似乎跨度（红色*）创建一个新行。

为什么呢？我该如何解决这个问题？

Answer 1

您可以移除浮动（左侧和右侧）并将div设置为display:inline，如下所示：

.richiedi_info_item_nota
{
    display:inline;
    width:252px;    
}

.richiedi_info_item label
{
    height:16px;
    line-height:20px;
}

修改

---

IE7不能很好地处理浮点数，特别是对于内联元素（span和label），所以我在两个项目周围添加了另一个div并浮动它。

<强> HTML

<div class="richiedi_info_item">
    <div id="floating">
        <label>Message</label>
        <span style="color:Red;">&nbsp;*</span> 
    </div>

   <div class="richiedi_info_item_nota">     
       <a id="notaInfo" href="javascript:void(0);">Click</a>            
   </div>
</div>

<强> CSS

.richiedi_info_item_nota
{
    width:21px;
    clear:both;
    float:right;
}

.richiedi_info_item
{
    margin-top:15px;   
    width:400px; 
}

.richiedi_info_item label
{
   height:16px;
    line-height:20px;
}

#floating {
    float:left;
}

工作示例

JsFiddle Demo