Question

我想让整个弓链接可点击。如果我单击单词的外部但仍在框中，它将选择链接。如果问题令人困惑，我很抱歉。我已经坚持了很长一段时间。你如何使整个盒子可以点击？

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

首先使用display:block中的<a>将内联标记转换为块标记性质。

并且不要为<a>设置高度和宽度，然后在<a>中使用填充而不是<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>

Answer 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
}

为：

.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
}

Answer 3

我在评论行中添加了更改，因此您可以尝试：

typedef volatile struct{
    unsigned int pin_in;
    unsigned int pin_out;
    unsigned int pin_dir;
    unsigned int pin_ren;
    unsigned int pin_ds;
    unsigned int pin_sel;
    unsigned int reserved[10];
}io_hw_t;
//#define PABASE ((io_hw_t*) (0x200)) // this part is working

#define PABASE 0x200
#define PBBASE 0x220

io_hw_t *const  io[] = {PABASE, PBBASE}; // error

Answer 4

试试这个css

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

并且还有另一种完美的工作方式，但它不适用于w3c标准：

<a href='www'><li></li></a>

如何使整箱链接可点击？

4 个答案: