HTML - 对齐表格列权 [英] html - align table column right

查看:302
本文介绍了HTML - 对齐表格列权的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有我的网站的标题(在图片中看到的)

这基本上< TD>< A HREF> 的的CSS样式。现在我的问题是,我该怎么办,如果要在同一行中添加一个或多个按钮,但其右对齐?

这并不一定是一个CSS的解决方案,我正在寻找一种方式来做到这一点在HTML中的<表> &LT ; TD> 标签

感谢。

编辑:这是PHP的一部分生成的头:

 回声<<< TOPBARHEREDOC2
<链接相对=样式表的href =/ CSS / horizo​​ntal_navbar.css类型=文本/ CSS媒体=屏幕>
<表格边框=自动ID =顶栏>
    &其中; TD>&其中;一类=topbarlink的href =index.php的>安娜Sayfa&所述; / a取代;&所述; / TD>
    &其中; TD>&所述;?userstats.php类别= $类别一类=topbarlink的href =>İstatistik&所述; / a取代;&所述; / TD>
    &其中; TD>&其中;一类=topbarlink的href =contact.php>İletişim&所述; / a取代;&所述; / TD>
    &其中; TD>&其中;一类=topbarlink的href =useful_links.php> Linkler&所述; / a取代;&所述; / TD>
    &其中; TD>&其中;一类=topbarlink的href = $ lastlink_address> $ lastlink_name&所述; / a取代;&所述; / TD>
< /表>
< HR>
< BR>
TOPBARHEREDOC2;
 

这就是CSS:

 表a.topbarlink {
/ * TOP,右,下,和放大器;剩下*/
保证金:0px 0px 0px 0px;
字体家庭:富利,投石机MS,宋体,无衬线;
字体重量:大胆的;
颜色:#069;
背景颜色:#f2f2f2;
文字修饰:无;
    边框底部:2px的固体#ccc;
    边境顶:2px的#ccc;
    右边框:2px的固体#ccc;
    左边框:2px的#ccc;
    / *填充(订购)* /
    填充顶:0.2em;
    填充右:1EM;
    填充底:0.2em;
    填充左:1EM;

}
 

解决方案

首先,你真的不应该使用表以外的任何表格数据等。语义标记总是更好,所以你的情况可能会更好使用无编号列表的菜单。

总之,让我们说这是你的表:

 <表>
  &其中; TR>
    &其中;第i;&所述; A HREF =#>项目1所述; / a取代;&所述; /第i个
    &其中;第i;&所述; A HREF =#>项目2'; / a取代;&所述; /第i个
    &其中;第i;&所述; A HREF =#>项目3'; / a取代;&所述; /第i个
    百分位类=右>&所述; A HREF =#>项目4℃/ a取代;&所述; /第i个
  < / TR>
< /表>
 

然后就可以用这个CSS来调整一个项目,以正确的:

 表格{宽度:100%; }
日{浮动:左; }
th.right {浮动:权利; }
 

http://fiddle.jshell.net/6z97w/

I have a header for my website (see in the picture)

which are basically <td><a href>'s styled with css. now my question is what do I do if want to add one or more buttons in the same row but align them to the right?

It does not have to be a css solution, I'm looking for a way to do this in html's <table> or <td> tags.

Thanks.

Edit: This is the part of php that generates the header:

echo<<<TOPBARHEREDOC2
<link rel="stylesheet" href="/css/horizontal_navbar.css" type="text/css" media="screen">
<table border="auto"  id="topbar" >        
    <td><a class="topbarlink" href="index.php">Ana Sayfa</a></td>
    <td><a class="topbarlink" href="userstats.php?category=$category">İstatistik</a></td>
    <td><a class="topbarlink" href="contact.php">İletişim</a></td>
    <td><a class="topbarlink" href="useful_links.php">Linkler</a></td>
    <td><a class="topbarlink" href=$lastlink_address>$lastlink_name</a></td>
</table>
<hr>
<br>
TOPBARHEREDOC2;

and this is the css:

table a.topbarlink{
/*TOP, RIGHT, BOTTOM, & LEFT*/
margin:0px 0px 0px 0px;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
font-weight:bold;
color:#069;
background-color: #f2f2f2;
text-decoration: none;    
    border-bottom: 2px solid #ccc; 
    border-top: 2px #ccc;
    border-right: 2px solid #ccc;
    border-left: 2px #ccc;
    /*padding (ordered)*/
    padding-top:0.2em;
    padding-right: 1em;
    padding-bottom:0.2em;
    padding-left: 1em;

}

解决方案

First of all, you really shouldn't use tables for anything other than tabular data. Semantic markup is always better, so in your case it would be better to use an unnumbered list for your menu.

Anyhow, let's say this is your table:

<table>
  <tr>
    <th><a href="#">Item 1</a></th>
    <th><a href="#">Item 2</a></th>
    <th><a href="#">Item 3</a></th>
    <th class="right"><a href="#">Item 4</a></th>
  </tr>
</table>

Then you can use this CSS to align one item to the right:

table { width: 100%; }
th { float: left; }
th.right { float: right; }​

http://fiddle.jshell.net/6z97w/

这篇关于HTML - 对齐表格列权的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆