使列表项能够点击

这是我的第一个网站这里是我的html代码：使列表项能够点击

html { 
 
    font-family: sans-serif; 
 
    -webkit-text-size-adjust: 100%; 
 
    -ms-text-size-adjust: 100%; 
 
} 
 

 
.s-header { 
 
    border-top: 3px solid #F48024; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    border: 1px solid #ccc; 
 
    height: 50px; 
 
    width: 100%; 
 
    align-items: center; 
 
} 
 

 
.container>ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: block; 
 
    padding-left: 200px; 
 
} 
 

 
.container>ul>li { 
 
    display: block; 
 
    list-style: none; 
 
    padding: 15px 10px 17px 13px; 
 
    float: left; 
 
    cursor: pointer; 
 
} 
 

 
ul li:hover { 
 
    display: block; 
 
    color: black; 
 
    background-color: #e4e6e8; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #535a60; 
 
} 
 

 
a:hover { 
 
    color: black; 
 
} 
 

 
#logoimage { 
 
    float: left; 
 
    height: 50px; 
 
    width: 40px; 
 
}

<header class="s-header"> 
 
    <div class="container"> 
 
    <ul> 
 
     <li class=""><a href="page2.html">Questions</a></li> 
 
     <li class=""><a href="#">Tags</a></li> 
 
     <li class=""><a href="#">Users</a></li> 
 
    </ul> 
 
    </div> 
 
</header>

我想这三个选项卡链接到三个不同的网页，我试图使链接在整个列表中的项目点击不只是当把光标放在链接上..对不起，错过了新的web开发

来源

2017-09-01 hassan shams

变化全段 '是{text-装饰：无;颜色：＃ 535a60; }' 至 'a {display：block; text-decoration：none; color：＃535a60; }' – Isank

_“这是我的第一个网站”_看起来非常类似于stackoverflow – j08691

是的，所以 –

将display:block添加到锚元素并将填充从列表项移动到锚元素。这将确保整个区域被锚元素覆盖并因此可点击。

这是除了a风格：

a { 
    display:block; 
    padding: 15px 10px 17px 13px; 
    ... 
}

见下

html { 
 
    font-family: sans-serif; 
 
    -webkit-text-size-adjust: 100%; 
 
    -ms-text-size-adjust: 100%; 
 
} 
 

 
.s-header { 
 
    border-top: 3px solid #F48024; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    border: 1px solid #ccc; 
 
    height: 50px; 
 
    width: 100%; 
 
    align-items: center; 
 
} 
 

 
.container>ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: block; 
 
    padding-left: 200px; 
 
} 
 

 
.container>ul>li { 
 
    display: block; 
 
    list-style: none; 
 
    float: left; 
 
    cursor: pointer; 
 
} 
 

 
ul li:hover { 
 
    display: block; 
 
    color: black; 
 
    background-color: #e4e6e8; 
 
} 
 

 
a { 
 
    display: block; 
 
    padding: 15px 10px 17px 13px; 
 
    text-decoration: none; 
 
    color: #535a60; 
 
} 
 

 
a:hover { 
 
    color: black; 
 
} 
 

 
#logoimage { 
 
    float: left; 
 
    height: 50px; 
 
    width: 40px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <header class="s-header"> 
 
    <div class="container"> 
 
     <ul> 
 
     <li class=""><a href="page2.html">Questions</a></li> 
 
     <li class=""><a href="#">Tags</a></li> 
 
     <li class=""><a href="#">Users</a></li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 
    <link rel="stylesheet" href="main.css"> 
 
</body> 
 

 
</html>

来源

2017-09-01 20:34:06 Zac

工作就像一个魅力..非常感谢 –

@ hassanshams没问题，你能接受我的回答吗？ – Zac

会做..再次感谢 –

如果我是正确的：尝试更换<li><a>Link</a></li> 与<a><li>Link</li></a>

来源

2017-09-01 20:27:08 GreenStripedUnicorn

li只能是ol或ul的子。 :( –

使列表项能够点击

回答

相关问题