Question

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

我有以下的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解决方案，有人能指出为什么它会更好，以及如何使它看起来像表解决方案一样整洁？

由于

Answer 1

你的markUp看起来像这样：

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

您可以通过CSS设置样式。也许看看Bootstrap框架。

Answer 2

首先，我想指出你所犯的错误。

这一切都发生了，因为你没有给出适当的宽度

<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%' />

选中此Fiddle

其次， tabular structure导航相当旧。

选中此Sample JSFiddle以使用ul和li s

进行设计

将此网站检查为learn how to build a Nav Menu

在具有多个链接的页面上对齐html表

2 个答案: