Question

目前我有一个非常简单的表格，其中包含以下内容：

<div class="datepicker">
   <p>
      From: 
      <span class="spanMonth">
         <div id="div_dateFromReports_month">
            <select></select>
         </div>
      </span>
      <span class="spanDay">
         <div id="div_dateFromReports_day">
            <select></select>
         </div>
      </span>
      <span class="spanYear">
         <div id="div_dateFromReports_year">
            <select></select>
         </div>
      </span>
   </p>
   <div style="clear: both;"></div>
</div>

现在，每个跨度上的类只包含一个“float：left”，结果使它们浮动并将“From”字放在右边，这当然是无意的，是否有办法放置“从”字到它的预定位置而不包装它？

注意：标签被剪切以避免用不必要的数据填充问题。

看起来像这样：

   _______   ________   ________
  |_______| |________| |________| From:

我需要它看起来像这样：

          _______   ________   ________
 From:   |_______| |________| |________|

注意：正如我在下面评论的那样，是的，我知道，破坏的HTML，遗憾的是这是一个页面的一部分已经被jQuery和许多破坏的视图助手（Zend）攻击，现在我正在尝试的是将其修复为我真的无法修改结构，SELECT来自php，包含DIV的跨度来自Zend视图助手，依此类推。截至目前，我无能为力，你知道软件公司是如何立即要求的......讨厌破解HTML，但现在它无法帮助。感谢您的所有意见：）

Answer 1

好的，你有两个选择。

选项1：将“发件人”文本放入向左浮动的跨度。
选项2：从跨度中移除浮子。（跨度是内联元素，所以它们不会自我清醒，因此不应该需要一个漂浮物应用于他们）

编辑：Ack我明白为什么你的跨度漂浮了。你的跨度内有div，这是不正确的。我要做的是清理divs，删除div周围的div，浮动div，在“From”文本周围添加一个div并向左浮动。

Answer 2

我要做的第一件事就是让HTML有效：span不能包含div。 HTML有效后，从那里开始处理样式。就目前而言，我甚至无法在Safari 5中重现这个问题。

Answer 3

Live Demo （仅在FireFox 3.6.x中测试过）

删除float: left;并使用此CSS：

.datepicker span div { display: inline; }

替代解决方案：（假设您可以编辑HTML）

<div class="datepicker">
      From:
      <select></select>
      <select></select>
      <select></select>
</div>

使用DIV和浮动SPAN的问题

3 个答案: