无法将此文本移至左侧答案

【问题标题】：Can't get this text over to the left无法将此文本移至左侧
【发布时间】：2012-05-23 22:23:25
【问题描述】：

我正在尝试将“大约 15 小时前”文本显示在左侧，但似乎无法完成。向左浮动似乎不起作用，我无法减少左边距，因为“3 分钟前”文本将与图像发生冲突。

这是 html（很抱歉，弄得一团糟）：

<div class="comment_column_narrow">
    <div id="comment_title_39" class="comment_title">
        Do you like this song?

        <a href="/comment_titles/39" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a>
    </div>


    <div class="comment_content">
          <a href="/profiles/45" class="comment_image"><img alt="Justin meltzer" src="/system/photos/45/tiny/Justin Meltzer.jpeg?1302075215"></a>
          <div class="textual_comment_content">
              <div class="comment_text">
                 <span class="name_link">
                     <a href="/profiles/45" class="normal">Justin Meltzer</a>
                 </span>
             Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
              </div>
               <span class="comment_footer">
             <ul>
            <li class="list_style">about 15 hours ago.</li>
         </ul>
           <span>
      </span></span></div></div></div>

下面是相应的 CSS：

.comment_column_narrow {
    float: left;
    width: 295px;
    margin-right: 5px;
}

.comment_content{
    clear:both;
    padding: 10px 5px;
    border-top:2px solid #E2E2E2;
    border-right:3px solid #E2E2E2;
}

.comment_text{
    line-height: 120%;
}

.comment_image{
    float:left;
    margin-right: 10px;
}

.comment_footer{

}

.comment_footer ul{
   margin-top: 5px;
}

.comment_footer ul li{
    font-size: 10px;
    color:gray;
    float:left;
    margin-right:25px;
}

.list_style{
    list-style:none;
}

.name_link{
     margin-left:-3px;
}

【问题讨论】：

Chromium 10 和 Firefox 4，在 Ubuntu 10.10 上，似乎按您的要求显示：JS Fiddle demo of posted code。您使用的是哪个浏览器/平台？
您能否发布反馈/3 分钟前部分的 HTML ... 也许两者之间存在一些不同，因为它看起来不像是动态的。此外，我不知道您为什么要使用带有嵌套 ul 的 comment_footer 跨度，而不是仅使用 div 并删除 ul/li。
@Scott，3 分钟前供稿的 html 完全相同。
@Scott，您能否提供一个示例，说明在没有 span 和 ul 的情况下您将如何做到这一点？也许这样就可以了……
@Justin - 抱歉，不得不下班。很高兴看到我的建议是正确的！

标签： html css positioning css-float styling

【解决方案1】：

代替

这个：

<div class="comment_text">
    <span class="name_link">
        <a href="/profiles/45" class="normal">Justin Meltzer</a>
    </span>
    Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
</div>
<span class="comment_footer">
    <ul>
        <li class="list_style">about 15 hours ago.</li>
    </ul>
</span>

将comment_footer 跨度移动到comment_text 跨度内，以便它根据需要环绕图像。然后删除<ul> 和<li>，因为它们会妨碍您。你最终得到：

<div class="comment_text">
    <span class="name_link">
        <a href="/profiles/45" class="normal">Justin Meltzer</a>
    </span>
    Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
    <span class="comment_footer">about 15 hours ago.</span>
</div>

【讨论】：

【解决方案2】：

尝试将评论部分更改为：

    <div class="comment_content">
        <a href="/profiles/45" class="comment_image"><img alt="Justin meltzer" src="/system/photos/45/tiny/Justin Meltzer.jpeg?1302075215"></a>
        <div class="textual_comment_content">
            <div class="comment_text">
                <a href="/profiles/45" class="normal name_link">Justin Meltzer</a>
                Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
            </div>
            <div class="comment_footer">
                about 15 hours ago.
            </div>
        </div>
    </div>

【讨论】：