-1

我想在文档中放置一些非常基本的导航链接（遇到 ipad 的 li:hover 问题）。

我有以下 html 代码，我想要文档标题样式导航链接

所以Top将向左齐平，该nav组将在顶部居中并且next向右齐平。

但是所有内容都被限制在 div 的左侧，而不是散布在其中。我究竟做错了什么？我会尝试使用 css，但不知道如何去做。

<table id='innav'>
 <col width='20%'/>
 <col width='60%' />
 <col width='20%' />
  <tr> 
    <td align='left'>
        <a href="../index.html">Top</a>
    </td>

    <td align='center'>
        <nav> 
            <a href="./section1.html">Section 1</a>| 
            <a href="./section2.html">Section 2</a>| 
            <a href="./section3.html">Section 3</a> 
        </nav>
    </td>

    <td align='right'>
        <a href="./section1.html">Next</a>
    </td>
  </tr>
</table>

编辑：同时添加表格 + css 版本和纯 css 版本——

使上述工作非常优雅的 CSS是

#innav {
  width: 100%;
  margin: 0pt;
  padding: 0pt;
}

我会制作的纯 css 版本 - 但在下面看起来和感觉相当不优雅：

html 显然更整洁，更易于阅读

<ul id='innav1'>
    <li id='leftnav'>
        <a href=".index.html">Top</a></li>
    <li id='centernav'> 
        <ul>
        <li><a href="./section1.html">UK Process</a>|</li>
        <li><a href="./section2.html">NA Process</a>|</li>
        <li><a href="./section3.html">AP Process</a></li> </ul> </li>
    <li id='rightnav'>
        <a href="./section1.html">Next</a> </li> </ul>

CSS看起来像这样：

#centernav > ul > li {
  display: inline;
  width: 70%;
  margin: 0pt;
  padding: 0pt;
}

#centernav {
  width: 30%;
  margin-left: 30%
}

#leftnav {
  float: left;
  width: 7%;
  margin: 0pt;
  padding: 0pt;
}

#rightnav {
  float: right;
  width: 10%
}

#innav1 li{
  list-style-type: none;
  display: inline-block;
}

我敢肯定它有一些冗余的键值，最终内容在页面顶部的分布要少得多。

鉴于对 css 解决方案的高度重视，有人可以指出为什么它会更好以及如何使它看起来像 table 解决方案一样整洁吗？

谢谢

4

2 回答 2

2

您的标记可能看起来像这样：

<div class="xyz">
     <ul> 
         <li>
            <a href="../index.html">Top</a>
        </li>
       ...
   </ul>
</div>

您可以通过 css 对其进行样式设置。Maybee 看看Bootstrap框架。

于 2013-09-03T06:46:26.863 回答
1

首先我要指出你犯的错误。

这一切都是因为你没有给出合适的宽度

<table id='innav'> <!--MISSED to specify the width of table, it inherit parent-->
<col width='30%'/> <!--Always try to cover 100%, here you have 110% (WRONG)-->
 <col width='60%' />
 <col width='20%' />

将其更改为

 <table id='innav' style="width: 100%"> <!--IMPORTANT, otherwise ti will take BODY-->
 <col width='10%'/> <!-- SPLIT THIS 100% AMONG COL-->
 <col width='80%' />
 <col width='10%' />

检查这个小提琴

其次，tabular structure对于Navigation相当古老。

检查此示例 JSFiddle以使用ul和lis进行设计

检查此站点以了解如何构建导航菜单

于 2013-09-03T06:50:30.190 回答