jQtouch CSS标题栏

我正在为小型移动应用程序使用jQtouch。使用default CSS该应用程序看起来像我想要的。不过，我需要在页面的左侧和右侧有一个标题。例如， alt text http://shaiperednik.com/img/AV-Clock-20091028-084713.png jQtouch CSS标题栏

如果任何人都可以指出我在正确的方向来实现这一点，我将不胜感激。谢谢！

来源

2009-10-28 shaiss

我的临时解决方案是使用表，但我认为应该有一个适当的CSS方法来做到这一点。 – shaiss 2009-11-05 15:27:23

一些标准的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>

来源

2009-11-11 10:14:07

我必须将其标记为正确，因为它的工作原理和使用CSS。表是邪恶的http://goo.gl/TLm6 – shaiss 2010-06-14 20:03:52

使用'

'进行布局很糟糕，但使用它来显示表格数据在语义上是正确的。而且CSS也用于设置'

'。 – JohnB2012-02-28 01:47:24

shaiss，

我想用<table>选择是要走的路。

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

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

然后你就可以定位<th>与“在”像这样：

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的，再加上使用position:relative另一个例子在这里：http://jsfiddle.net/L7fTp/

来源

2010-06-02 22:10:19 JohnB

jQtouch CSS标题栏

回答

相关问题