Html 使用 CSS 左对齐表格
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1139999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Left-aligning Tables with CSS
提问by Tom Johnson
I would like to left-align a table with CSS, in a way similar to align=left in standard HTML, but I understand that this is bad form. Is there any way to do this? If not, is there a way to format a left-aligned list of links that is next to content without using tables?
我想以类似于标准 HTML 中的 align=left 的方式使用 CSS 左对齐表格,但我知道这是不好的形式。有没有办法做到这一点?如果没有,有没有办法在不使用表格的情况下格式化内容旁边的左对齐链接列表?
回答by Will Morgan
For simplicity, take the stuff out of the style tags and use CSS classes instead:
为简单起见,去掉样式标签中的内容并使用 CSS 类代替:
<ul style="text-align: left; float: left;">
<li><a href="#">Your link here!</a></li>
</ul>
Simple. With the list displayed, you'll need to give the <ul>
's containing element the style of overflow: auto;
to remove the float for the next element that appears below it.
简单的。显示列表后,您需要为<ul>
的包含元素指定 的样式,overflow: auto;
以移除出现在其下方的下一个元素的浮动。
Following on from jeroen said, yes, a table should be left aligned by default unless you've set dir="rtl"
somewhere in your DOM. And in that case, unless you're being creative or you're writing Hebrew, there's no reason for it to be there ;)
jeroen 说,是的,除非您已dir="rtl"
在 DOM 中的某处设置,否则默认情况下表格应该左对齐。在这种情况下,除非你很有创意或者你正在写希伯来语,否则没有理由在那里;)
回答by Surfer
Answering "how do I align the text inside the table?", not about divs or how to float them.
回答“如何对齐表格内的文本?”,而不是关于 div 或如何浮动它们。
Here is how to make a table appear on the left of the page without using the deprecated align attribute:
以下是如何在不使用已弃用的 align 属性的情况下使表格出现在页面左侧:
<table style="margin-right:auto;margin-left:0px">
Be sure to specify a width less than the table's container yet large enough for your needs.
确保指定的宽度小于表格的容器但足够大以满足您的需要。
回答by jeroen
You can use an unordered list for the links, put it in a div and float the div left. With a proper left margin for the contents, the list of links will float nicely next to the contents.
您可以为链接使用无序列表,将其放入 div 并将 div 向左浮动。为内容留出适当的左边距,链接列表将很好地漂浮在内容旁边。
By the way, a table is normally aligned left to begin with, but if you want to position it left of you contents, you can also float the table left.
顺便说一下,表格一开始通常是左对齐的,但是如果您想将其放置在内容的左侧,您也可以将表格向左浮动。
回答by machineghost
As Jason commented, everything is aligned left by default in HTML. If your table's contents aren't left aligned you must either have changed their alignment somehow, or you are seeing the side effect of some padding or something. To "fix" such a table, try CSS along the lines of:
正如杰森所评论的那样,HTML 中的所有内容默认都是左对齐的。如果您的表格内容没有左对齐,您必须以某种方式更改了它们的对齐方式,或者您看到了一些填充或其他东西的副作用。要“修复”这样的表格,请按照以下方式尝试 CSS:
<style>
TABLE, TBODY, TR, TD, TH {
text-align:left;
padding:0;
border-spacing:0; /* or border-collapse:collapse */
}
</style>
回答by user1359
use margin:auto 0
it's like a miracle
使用margin:auto 0
它就像一个奇迹