Question

我正在编写一个学校项目的快速网站，而且我非常生疏羞愧地挂着头。我似乎无法获得影响标签的宽度或将文本置于其中心。

我不知道为什么，但是如果你能向我解释我要做的是让导航栏上的链接居中，并让图像位于加载文本的顶部并充当标题。加载应该以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>

注意：将列表用于我想要做的事情会更容易吗？

Answer 1

不使用表格结构，而是使用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>

Answer 2

最好的想法是使用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/

Answer 3

首先要做的事情......你<{1}}

中不需要 <div class="navTd">

将所有内容分配给<td>即可。然后，使用<td>将宽度分配给calc

，而不是使用display:inline-block;（仍然不是跨浏览器）

td

working demo

Answer 4

人们再次宣称他们对桌子的仇恨。别担心。

在这里，我使用了表格。我改变了三件事：

将表格设为table-layout: fixed;
将您的navTd课程放在td上，而不是div。否则你告诉div采取一定大小的td，而不是td采取一定大小的表
将px移至396px。 width属性不使用CSS语法。您可能希望使用CSS作为宽度，只是为了更加热衷于HTML5。

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

CSS似乎不会影响TD结构

4 个答案: