Question

我正在努力使整个li标签区域可以点击以及我已经点击的文本。我试过给它一个href属性，但这不起作用。我已经将li背景设置为在它悬停时改变颜色，但正如我所说，我如何使整个区域可以点击？提前谢谢。

HTML：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Lakeside Books</title>
    <link rel="stylesheet" type="text/css" href="masterstyle.css">
    <meta name="viewsize" content="width-device-width,initial-scale=1.0">

    <!--[if IE]>
    <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
<div id="wrapper">
    <div id="sidebar">
        <nav id="nav">
            <h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
            <div id="searchbar">
                <form action="http://www.example.com/search.php">
                    <input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
                </form>
            </div>
            <ul>


<li style="background-color: #333">
                    <a href="1Index.html" class="link">
                        Home
                    </a>
                </li>
                <li>
                    <a href="2Catgeories.html" class="link">
                        Categories
                    </a>
                </li>
                <li>
                    <a href="http://example.com" class="link">
                        Bestsellers
                    </a>
                </li>
                <li>
                    <a href="http://example.com" class="link">
                        Contact
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="sectionone">
        <div id="containerone">
            <div id="header">
                <div id="logo">
                    <h1>LAKESIDE BOOKS</h1>
                    <p>KERRYS LOCAL BOOKSTORE</p>
                </div>
            </div>
        </div>
    </div>

    <div id="sectiontwo">
        <div id="containertwo">
            <h2 id="sectwohead">Best Selling Books Right Now</h2>
                <div id="bestsellerimages">
                    <figure>
                        <img src="Images/4.jpg" alt="book1" height="200" width="131" class="imgbot">
                        <figcaption>The Girl On The Train <br>
                            <span style="font-style: italic; font-size: 0.9em">Paula Hawkins</span></figcaption>
                    </figure>
                    <figure>
                        <img src="Images/3.jpg" alt="book2" height="200" width="131" class="imgbot">
                        <figcaption>Meet Me In Manhattan <br>
                            <span style="font-style: italic; font-size: 0.9em">Claudia Carroll</span></figcaption>
                    </figure>
                    <figure>
                        <img src="Images/5.jpg" alt="book1" height="200" width="131" class="imgbot">
                        <figcaption>The Pointless Book 2 <br>
                            <span style="font-style: italic; font-size: 0.9em">Alfie Deyes</span></figcaption>
                    </figure>
                </div>
        </div>
    </div>

</div>
</body>
</html>

CSS：

html, body { /* ### */
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
body {
    background-color: #fdfdfd;
    font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
    width: 100%;
    height: 100%;
    margin:0 0 0 20%; /* ### */
}
#sidebar {
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}
#nav {
    color: #DADADA;
    display: block;
    max-width: 100%;
}
#nav ul {
    padding-left: 0;
}
#nav li {
    list-style-type: none;
    margin: 0;
    padding: 0.75em 0 0.75em 0;
    text-align: center;
    max-width: 100%;
}
#nav li:hover {
    background:#333;
}
#nav li a {
    display: block;
    padding: 0.5em 0;
}
.link {
    text-align: right;
    margin-right: 25%;
    letter-spacing: 1px;
}

a:link, a:visited, a:hover, a:active{
    color: #DADADA;
    text-decoration: none;
}



#welcometext {
    text-align: center;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1em;
    margin-top: 2em;
}
#searchbar {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 1em 0.5em 1em;
    text-align: right;
}
#searchbar .searchstyle{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#searchbar input {
    max-width: 95%;
}
#sectionone {
    /*position: fixed;*/
    top: 0;
    right: 0;
    width: 80%;
}
#containerone {
    margin-top: 0;
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-bottom: 2px solid #DADADA;
    box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
    margin: 6em 0 6em 0;
}
#logo h1 {
    color: #ed786a;
    text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
    letter-spacing: 13px;
}
#logo p {
    margin-top: -0.6em;
    color: #888888;
    letter-spacing: 4px;
    font-size: 0.85em;
}
#sectiontwo {
    width: 80%;
    top: 0;
    right: 0;
}
#containertwo {
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #888888;
}
#sectwohead{
    margin: 2em 0 2em 0;
    color: #888888;
}
#bestsellerimages{
    float: left;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 2em 0;
}
#bestsellerimages img{
    padding: 0;
}
#bestsellerimages figure{
    display: inline-block;
    width: 131px;
}
#bestsellerimages figcaption{
    font-size: 1.2em;
}
#bestsellerimages figure .imgbot{
    margin: 0 0 0.5em 0;
}

这应该有助于更清楚地看到我正在尝试做什么，正如你在这张图片中看到的那样 - http://i.imgur.com/OZIt9TM.png - 唯一可点击的区域是chromes检查中的蓝色部分很容易看到。所以我要做的就是让特定的“Home Li”的整个区域都可以点击。

Answer 1

基于列表的菜单的规则＃1：设置链接的样式，而不是包装器。只为定位设置样式（显示/浮动等）。

在A-tag上使用display:block并将所有样式放在该标记上，而不是列表本身。

家

将background-color: #333移至您的css中的.link班级，并将display:block添加到该声明中。

Answer 2

抱歉...试试这个..

#nav li {
   list-style-type: none;
  /* margin: 0; */
  /* padding: 0.75em 0 0.75em 0; */
  /* text-align: center; */
  /* max-width: 100%; */
  /* display: block; */
}

#nav li a {
  display: block;
  padding: 0.5em 0;

  margin: 0;
  padding: 0.75em 0 0.75em 0;
  text-align: center;
  max-width: 100%;

}

Answer 3

如果你正在使用jQuery（假设标签是正确的）你可以像这样做而不用设置锚标签的样式：

$('ul li').click(function() {
   location.href = $(this).find('a').prop('href'); 
});

我建议像<ul class="navigation">

这样的ul列表的类名

$('ul.navigation li').click(function() {
       location.href = $(this).find('a').prop('href'); 
});

Answer 4

围绕LI标签包裹A标签。例如，查看谷歌链接。你只在文本周围放置A标签，而不是整个元素。

<ol>
  <a href="http://google.com"> 
    <li>google</li> <!-- DO THIS -->
  </a>
  <li>
    <a href="http://yahoo.com">yahoo</a> <!-- YOUR CURRENTLY DOING THIS -->
  </li>
</ol>

如何使整个＆＃39; li＆＃39;区域和文本可点击链接

4 个答案: