链接无法在表中工作

时间:2014-10-07 00:49:00

标签: html css html-table

我为我的朋友妈妈制作这个网站,由于某种原因,我的链接不能在我的桌子上工作,我有理由相信它与CSS有关,我也是&#39我之前从未遇到过这个问题,所以我不完全确定如何解决这个问题。该代码适用于Chrome但不支持Firefox也是为了澄清,我无法点击该链接,它将其变为蓝色并加下划线但我通常无法点击它。

HTML

<nav>
<table id="nav_table">          
<tr>
<td class="nav_border">
<a href="www.google.com"><p class="nav_options">Home</p></a>
</td>
<td class="nav_border">
<p class="nav_options">Restaurants</p>
</td>
<td class="nav_border">
<p class="nav_options">Near you</p>
</td>
<td class="nav_border">
<p class="nav_options">Order Here!</p>
</td>
</tr>
</table>
</nav>

CSS

nav{
position: relative;
top: 50px;
}

#nav_table{
position: relative;
top: 60px;
margin-left:auto;
margin-right:auto;
 border-spacing: 5px 0px;
border-collapse: ;
height: 0px;
}

.nav_border{
text-align: center;
border: 2px solid black;
padding: 10px;
width: 120px;
height: 0px;

-webkit-box-shadow: rgb(,,) 0px 0px 0px ;
-moz-box-shadow: rgb(,,) 0px 0px 0px ;
box-shadow: rgb(,,) 0px 0px 0px ;

background:-webkit-radial-gradient(center,circle,red 0%, orange 50%);
background:-moz-radial-gradient(center,circle,red 0%, orange 50%);
background:radial-gradient(center,circle,red 0%, orange 50%);

-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}

.nav_options{
font-size: 20px;
text-decoration:none;
}

正如我之前所说,我从来没有遇到过这个问题,我已经尝试使用谷歌搜索它,它说它与将父元素宽度和高度更改为百分比而不是像素有关但我不喜欢&# 39;认为它适用于我试图完成的事情。

3 个答案:

答案 0 :(得分:0)

您的语法不正确。如果你想要与文本链接,你应该先试试这个

<a href="http://www.stackoverflow.com">link text</a>  

<nav>
<table id="nav_table">          
<tr>
<td class="nav_border">
<a href="http://www.stackoverflow.com" p class="nav_options">Home</p></a>
</td>
<td class="nav_border">
<p class="nav_options">Restaurants</p>
</td>
<td class="nav_border">
<p class="nav_options">Near you</p>
</td>
<td class="nav_border">
<p class="nav_options">Order Here!</p>
</td>
</tr>
</table>
</nav>

答案 1 :(得分:0)

你需要把&#39; http://&#39;在你的网址前面,所以浏览器知道它是一个绝对的URL。

e.g。 HREF =&#34; HTTP://www.google.com"

如果没有,浏览器会认为网址是相对的,因此它会将您带到错误的网页。

将您的锚标记放入段落标记中也具有更好的向后兼容性。

<p class="nav_options"><a href="http://www.google.com">Home</a></p>

答案 2 :(得分:0)

你的鳕鱼不正确,你必须添加&lt; a&gt; &LT; / a&gt;标记到&lt; p> &LT; / p&gt;

如果您想要可点击的单元格,请使用CSS作为标记:

a.Click { 

width:100%;
height:100%;
display:block;
text-align:center

}