CSS似乎并不影响TD结构

我编码一个快速的网站一所学校的项目，我感到非常生疏头挂在耻辱。我似乎无法获得影响标签或将文本居中的宽度。CSS似乎并不影响TD结构

我不知道为什么，但如果你能向我解释什么，我必须做的就是中心的导航栏上，为图像坐加载文本并作为标题上面的链接。加载应该以btw为中心，但calc（）不喜欢我;〜;

http://jsfiddle.net/MasterWhipper/6Z6z6/

<div id="navBar"> 
    <table id="navText"> 
     <tr> 
      <td><div class="navTd"><a href="">Home</a></div></td> 
      <td width="396px">Loading</td> 
      <td><div class="navTd"><a href="">Donate</a></div></td> 
      <td><div class="navTd"><a href="">About Us</a></div></td> 
     </tr> 
</table> 
<img src="http://i.imgur.com/Y7OE90F.png" class="titleIMG"/> 
</div>

注：这将是更容易使用的什么，我试图做一个列表？

来源

2014-01-09 MasterWhipper

的'width'属性采用的数，像素 - 在结束对于初学者 – sevenseacat

使用'表格的布局丢弃'px'：固定;'但不使用'table'对于这一点，使用'ul'和'li'用'显示：内联块;'或'浮动：左;' –

-1

再次，人们信奉他们的桌子的仇恨。不要担心。

在这里，我把它与表工作。三件事我改变：

设置表
把你navTd类对TD，而不是股利。否则，你告诉div来取TD一定规模，而不是TD先把桌子
删除了PX至396px具有一定规模。 width属性不使用CSS语法。尽管您可能希望使用CSS来表示更多的HTML5热情。第一

http://jsfiddle.net/6Z6z6/3/

来源

2014-01-09 08:22:20

真棒ŧ他是我所需要的，但感谢所有为我会考虑我做一个导航栏XD如果你感觉大方下次其他的方法，如果我把它作为绝对的，为什么不是像浮在加载文本上方和更低的Z指数？ – MasterWhipper

@ user3176562我对z-index不是很熟悉，但首先我认为更高的值在上面，而不是相反。无论如何，我通过删除任何提及的z-index，并将图像的''标签放在表格之前解决了这个问题。显示为在CSS表格http://jsfiddle.net/6Z6z6/6/ –

元素（'显示：table'和'表row'和'表cell'）？太棒了，我喜欢他们。兼容性IE8 +（来自OP的小提琴是IE9 +，所以一切都很好）。 HTML数据表？显示数据表的最有意义的方式。 HTML **布局**表格？可怕的是，在大多数情况下已经有好几年了。在2014年，除了遗留系统，当将需要'合并单元格/ rowspan'（不存在CSS） – FelipeAls

而不是使用表结构使用ul，li标签导航...您可以轻松地他们的风格:)

<div id="navBar"> 
     <ul> 
     <li><a href="">Home</a></li> 
     <li>Loading</li> 
     <li><a href="">Donate</a></li> 
     <li><a href="">About Us</a></li> 
    </ul> 

    <img src="http://i.imgur.com/Y7OE90F.png" class="titleIMG"/> 
    </div>

来源

2014-01-09 08:16:47 Josemon

它是使用HTML5 nav标签最好的主意，它已被认为对导航菜单作为您的：

<nav> 
<a href="/html/">Home</a> | 
<a href="/css/">Loading</a> | 
<a href="/js/">Donate</a> | 
<a href="/jquery/">About us</a> 
</nav>

这是一个解决方案，适合您的问题，再加上它是目前的标准！你不会有CSS的问题。

给你约HTML5 nav标签的详细信息：

http://html5doctor.com/nav-element/

来源

2014-01-09 08:20:58

感谢您的信息，我肯定威利这样做下一次:) – MasterWhipper

第一件事情......你不需要<div class="navTd">内<td>

指定一切<td>，并且会做。然后，代替使用calc（它仍然没有跨浏览器），使用display:inline-block;分配宽度与td

#navText > td { 
    display:inline-block; 
    z-index: 3; 
    text-align: center; 
}

working demo

来源

2014-01-09 08:24:49 NoobEditor

CSS似乎并不影响TD结构

回答

相关问题