logo标签列表

如何使整个框可点击链接？

htmlcsslayout
4

我希望整个弓形链接都可以点击。即使我在单词外但仍在框内点击，它也会选择链接。如果我的问题不清楚，请见谅。我已经被困在这个问题上很长一段时间了。如何使整个框可点击？

body{
    height:100%;
    margin:0;
    background-color:#cccccc;
}
#container{
    width:100%;
    height:auto;
}
#header{
    width:100%;
    height:30px;
    background-color:white;
    margin:auto;
    background-color:#fff3b2;

}
.logo{
    font-weight:italic;
    width:4%;
    height:20px;
    float:left;
    font-size:20px;
    font-family:tahoma;
}
.navbar{
    width:75%;
    height:30px;
    margin:auto;

}
.navbar ul{
    list-style-type:none;
    margin:0;
    height:20px;
    float:left;
    padding:0;

}
.navbar li{
    float:left;
    padding-right:20px;
    padding-left:20px;
    display:block;
    font-size:18px;
    font-family:tahoma;
    font-weight:italic;
    border-left: 1px solid black;
    padding-bottom: 7px;

}
li a{
    text-decoration:none;
    height:20px;
    width:20px;

}
a:hover{
    text-decoration:none;
    color:black;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
    <link rel="stylesheet" href="default.css">
</head>
<body>
    <div id="container">
        <div id="header">
            <div class="logo">Hello</div>

            <div class="navbar">
                <ul>
                    <li><a href="#news">News</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

将填充/大小样式更改为li a，而不仅仅是在li上。 - Novocaine
4个回答
4

首先，在<a>中使用display:block可以将内联标签转换为块级标签。

而且不要为<a>设置高度和宽度，可以在<a>中使用填充(padding)代替<li>的方式。

body{
    height:100%;
    margin:0;
    background-color:#cccccc;
}
#container{
    width:100%;
    height:auto;
}
#header{
    width:100%;
    height:30px;
    background-color:white;
    margin:auto;
    background-color:#fff3b2;

}
.logo{
    font-weight:italic;
    width:4%;
    height:20px;
    float:left;
    font-size:20px;
    font-family:tahoma;
}
.navbar{
    width:75%;
    height:30px;
    margin:auto;

}
.navbar ul{
    list-style-type:none;
    margin:0;
    height:20px;
    float:left;
    padding:0;

}
.navbar li{
    float:left;
    display:block;
    font-size:18px;
    font-family:tahoma;
    font-weight:italic;
    border-left: 1px solid black;

}
li a{
    text-decoration:none;
    //height:20px;
    //width:20px;
    padding-right:20px;
    padding-left:20px;
    padding-bottom: 7px;
    display:block;
}
a:hover{
    text-decoration:none;
    color:black;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
    <link rel="stylesheet" href="default.css">
</head>
<body>
    <div id="container">
        <div id="header">
            <div class="logo">Hello</div>

            <div class="navbar">
                <ul>
                    <li><a href="#news">News</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

2

更改：

.navbar li{
    float:left;
    padding-right:20px; <= DELETE
    padding-left:20px;  <= DELETE
    display:block;
    font-size:18px;
    font-family:tahoma;
    font-weight:italic;
    border-left: 1px solid black;
    padding-bottom: 7px;

}
li a{
    text-decoration:none;
    height:20px; <= DELETE
    width:20px;  <= DELETE
}

to:

.navbar li{
    float:left;
    display:block;
    font-size:18px;
    font-family:tahoma;
    font-weight:italic;
    border-left: 1px solid black;
    padding-bottom: 7px;

}
li a{
    text-decoration:none;
    padding: 40px;  <= ADD
}
0

我在注释行中添加了更改，你可以尝试一下：

.navbar li {
            float: left;
            padding-right: 20px;
            /*padding-left: 20px;*/ //Remove padding
            text-align:center; //Add text-align
            display: block;
            font-size: 18px;
            font-family: tahoma;
            font-weight: italic;
            border-left: 1px solid black;
            padding-bottom: 7px;
            width: 90px; //Give specific width
            height: 60px; //Give specific height
        }

    li a {
        text-decoration: none;
        width: inherit; //Take parents width
        height: 100%;
        display: block; //display block
        padding-top: 10px; //add padding to vertical align
    }
-1

试试这个 CSS

 a {
      display: inline-block; height: 100%; width: 100%;   /*  fill the parent  */
    }

还有另一种方法可以完美地工作，但不符合w3c标准：

<a href='www'><li></li></a>
是的，我知道，并告诉他那是无效的，正确的方法是使用CSS。 - Mo Shal
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接