jQtouch CSS标题栏

Question

我正在将jQtouch用于小型移动应用。使用默认CSS 应用看起来我想要它。但是，我需要在页面的左侧和右侧有一个标题。例如， alt text http://shaiperednik.com/img/AV-Clock-20091028- 084713.png

如果有人能指出我正确的方向来实现这一点，我将非常感激。谢谢！

Answer 1

某些标准css怎么样？像这样：

div.leftHeader
{
    float: left;
}
div.rightHeader
{
    float: right;
}
div.clear
{
    clear: both;
}

然后使用此HTML代码：

<div class="leftHeader">In</div>
<div class="rightHeader">Day/Week</div>
<div class="clear"></div>

Answer 2

shaiss，

我认为使用<table>选择器是可行的方法。

在我看来，您的应用正在显示表格数据。因此，我认为 <！>“在<！>”; 和 <！>“;日/周<！>”应该是列标题。使用<th></th>而不是<td></td>来定义标题单元格。您需要将<th>包裹在<tr></tr>中，<thead>并且<tbody>是可选的：

<table>
  <thead>
    <tr><td>col1</td><td>col2</td></tr>
  </thead>
  <tbody>
    <tr><td>data1</td><td>data2</td></tr>
  </tbody>
</table>

然后你可以将position:relative与 <！>一起放在<！> <<; 中，如下所示：

thead th.left
{
  text-align: left;
}​

这里的完整源代码： http://jsfiddle.net/g3MKj/

当然，Jan Aagaard的代码可能对你有用。但仅仅为了学习，在CSS中完成同样事情的另一种方法是：

span.absolute-right
{
    position:absolute;
    right:0;
    margin-right:10px;
}

HTML：

<span>In</span>
<span class="absolute-right">Day/Week</span>

我有这个例子，还有Jan Aagaard，以及另一个使用<=>的示例： http：// jsfiddle。净/ L7fTp /