使用CSS左对齐表

时间:2009-07-16 20:11:15

标签: html css

我想用CSS左右对齐一个表,方式类似于标准HTML中的align = left,但我知道这是一个糟糕的形式。有没有办法做到这一点?如果没有,有没有办法在不使用表格的情况下格式化内容旁边的左对齐链接列表?

5 个答案:

答案 0 :(得分:8)

为简单起见,从样式标签中取出东西,改为使用CSS类:

<ul style="text-align: left; float: left;">
    <li><a href="#">Your link here!</a></li>
</ul>

简单。显示列表后,您需要为<ul>包含overflow: auto;样式的元素,以删除其下方显示的下一个元素的浮点数。

继jeroen之后说,是的,除非你在DOM中的某个地方设置dir="rtl",否则默认情况下应该保持一个表。在这种情况下,除非你有创意或者你正在写希伯来文,否则就没有理由在那里;)

答案 1 :(得分:7)

回答“如何对齐表格中的文字?”,而不是关于div或如何浮动它们。

以下是如何在不使用弃用的align属性的情况下使表格显示在页面左侧:

<table style="margin-right:auto;margin-left:0px">

请确保指定的宽度小于表格的容器,但又足够大,以满足您的需求。

答案 2 :(得分:2)

您可以对链接使用无序列表,将其放在div中并将div向左浮动。如果内容具有适当的左边距,则链接列表将在内容旁边漂浮。

顺便说一下,一张桌子通常是左边开始对齐的,但是如果你想把它放在你内容的左边,你也可以把桌子左边漂浮。

答案 3 :(得分:1)

正如Jason评论的那样,默认情况下,HTML中的所有内容都保持对齐。如果您的表的内容没有左对齐,您必须以某种方式更改其对齐方式,或者您正在看到某些填充或其他内容的副作用。要“修复”这样的表,请尝试使用CSS:

<style>
TABLE, TBODY, TR, TD, TH {
  text-align:left;
  padding:0;
  border-spacing:0; /* or border-collapse:collapse */
}
</style>

答案 4 :(得分:1)

使用 $(function(){ $('.txtMult').change(function(){ alert("work"); var p=$(this).parent().parent() var m=p.find('input.txtMult') var mul=parseInt($(m[0]).val()*$(m[1]).val()).toFixed(2) var res=p.find('.multTotal') res.html(mul); var total=0; $('.multTotal').each(function(){ total+=parseInt($(this).html()); }) alert(parseInt(total).toFixed(2)); $('#grandTotal').html(parseInt(total).toFixed(2)); }); }) $('.selectpicker').change(function() { calcVal(); }); function calcVal(){ alert($('select').val()*$('.multTotal').html()); $("#grandTotal").html($('select').val()*$('.multTotal').html()) } // call on document load calcVal();
它就像一个奇迹