使用CSS左对齐表格

13

我想使用CSS左对齐一个表格,类似于标准HTML中的align=left,但我知道这样做是不好的。有没有办法可以实现这个效果?如果没有,有没有一种方法可以格式化一个靠近内容的左对齐链接列表而不使用表格?


2
发布你的HTML代码?默认情况下所有内容都是左对齐的... - Jason
@Jason,th默认为居中对齐。[http://www.w3schools.com/tags/att_th_align.asp] - Jess
@Jess请不要引用W3Schools。它在最好的情况下是不可靠的,在最坏的情况下是明显错误的。http://w3fools.com - Jason
那句话说得对,但别引用W3Schools作为参考资源 :) - Jason
1
@Jason,是的,我从来不喜欢w3schools。但他们确实有惊人的SEO技巧,几乎总是谷歌搜索结果的第一名。 - Jess
5个回答

13

回答“如何对齐表格内的文本?”,不涉及div或如何浮动它们。

这是如何使表格出现在页面左侧而不使用废弃的对齐属性的方法:

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

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


“如何使表格内的文本对齐”与下一段文字相矛盾。 - Yaroslav Nikitenko

11

为简单起见,请将样式标签中的内容取出并改用CSS类:

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

简单。在显示列表时,您需要为包含元素给予<ul>样式overflow: auto;,以删除出现在下方的下一个元素的浮动样式。

继续jeroen所说的,是的,表格应默认左对齐,除非您在DOM中设置了dir="rtl"。在这种情况下,除非您要创意或书写希伯来语,否则没有理由将其放置在那里 ;)


2
你可以使用无序列表来放置链接,将其放在一个 div 中并向左浮动。通过为内容设置适当的左边距,链接列表将与内容很好地浮动在一起。
顺便说一下,表格通常是左对齐的,但如果你想将其定位在内容的左侧,也可以将表格向左浮动。

1

正如Jason所评论的,HTML默认情况下所有内容都是左对齐的。如果你的表格内容不是左对齐的,那么你要么已经在某些方面改变了它们的对齐方式,要么你正在看到一些填充或其他影响的副作用。要“修复”这样的表格,请尝试类似以下的CSS代码:

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

1
使用 margin:auto 0,就像是一个奇迹。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接