Question

我使用HTML和CSS创建了一个非常简单的网站，我也添加了一些链接，但只有一个链接实际工作。总共有4个链接，只有代码底部的一个链接可以使用。请帮忙。这是我的HTML代码：

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {  margin: 0;  padding: 0;  border: 0;  font-size: 100%;  font: inherit;  vertical-align: baseline;}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
  font: 25px 'Open Sans', Arial, Helvetica, sans-serif;
}

ol,ul {
  list-style: none;
}

blockquote,q {
  quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.nav {
  float: left;
}

.home {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 1200px;
}

.faq {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 900px;
}

.shop {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 580px;
}

.contact {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 200px;
}

html {
  box-sizing: border-box;
}

*,
*:before,*:after {
  box-sizing: inherit;
}

a {
  text-decoration: none;
}

.header {
  text-align: center;
}

.hemsidan {
  background: #ffffff url(../images/hemsidan.png)no-repeat 50% 50%;
  height: 1389px;
  width: 100%;
}

<header class="header">
  <div class="container">
    <div class="hemsidan"><img src="images/hemsidan.png" height="1389" width="1366" alt=""></div>
    <div class="centered">Centered</div>
    <nav>
      <ul class="nav">
        <li class="home"><a href="#">Home</a></li>
        <li class="faq"><a href="http://pages.ebay.com/seller-center/faq/index.html">FAQ</a></li>
        <li class="shop"><a href="https://www.blocket.se/">Shop</a></li>
        <li class="contact"><a href="https://twitter.com/realdonaldtrump">Contact us</a></li>
      </ul>
    </nav>
  </div>
</header>

我是HTML和CSS的新手所以请原谅我糟糕的编码，我只想让链接起作用。

Answer 1

我认为链接没有任何问题。我想，当你将它们放在容器中时它们是绝对的，它们会相互重叠，而你实际点击的是一些div或元素空白区域。

Menu:


1.  View entire list

2.  View one item

3.  Reset list

4.  Edit list

5.  Quit

Please choose an option: 3

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
font: 25px 'Open Sans', Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.nav {
float: left;
}
.home { 
//position: absolute; 
//top: 173px; 
width: 100%; 
padding-right: 1200px;
}
.faq{
//position: absolute; 
//top: 173px; 
width: 100%; 
padding-right: 900px;
}
.shop{  
//position: absolute; 
//top: 173px; 
width: 100%;
padding-right: 580px;
}
.contact{
//position: absolute; 
//top: 173px;  
width: 100%;
padding-right: 200px;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
 box-sizing: inherit;
}
a {
text-decoration: none;
}
.header {
text-align: center;
}
.hemsidan{
background: #ffffff url(../images/hemsidan.png)no-repeat 50% 50%;
height: 1389px;
width: 100%;
}

Answer 2

链接只是重叠，因为所有这些链接的最高值都为173px。只需将top: 173px;更改为每个链接的其他值，或者不使用padding-right，只需使用“right”和“left”定位。或删除下面的所有这些行。

.home {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 1200px;
}
.faq {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 900px;
}
.shop {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 580px;
}
.contact {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 200px;
}

您可以根据需要定位每个链接。

Answer 3

你的li元素绝对位于彼此之上。这意味着最后的li覆盖并阻止了以前的li-s。

而不是绝对定位和填充权限执行此操作：

.home { 
    display: inline-block;
}
.faq{
    display: inline-block;
}
.shop{  
    display: inline-block;
}
.contact{
    display: inline-block;
}

（根本不需要ul和li元素。只需将链接放在导航块中并给它们一些填充）

Answer 4

这是已清理过的代码（如前所述，您使用的是position：absolute;对于导致点击其他位置而不是链接的链接）

ol,
ul {
  list-style: none;
}

li {
  display: inline-block;
  margin: 10px;
}

a {
  text-decoration: none;
}

.container {
  text-align: center;
}

<div class="container">
  <div class="hemsidan"><img src="images/hemsidan.png" height="1389" width="1366" alt=""></div>

  <nav>
    <ul class="nav">
      <li class="home"><a href="#">Home</a></li>
      <li class="faq"><a href="http://pages.ebay.com/seller-center/faq/index.html">FAQ</a></li>
      <li class="shop"><a href="https://www.blocket.se/">Shop</a></li>
      <li class="contact"><a href="https://twitter.com/realdonaldtrump">Contact us</a></li>

    </ul>
  </nav>
</div>

HTML＆amp; CSS - 链接不起作用

4 个答案: