使列表項能夠點擊

這是我的第一個網站這裏是我的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的子。 :( –

使列表項能夠點擊

回答

相關問題