Question

li中的文本是一个链接，其中包含文本的整个li项目应作为链接。我怎样才能得到它以便整个li项目作为链接运行而不仅仅是li中的文本？

CSS：

#navbar {
    width: 900px;
    height: 50px;
    background-image: url(http://iforce.co.nz/i/chiislxt.mp4.png);
}

#navbar ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
    text-align: center;
}

#navbar ul li {
    height: 50px;
    width: auto;
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    border-right: 1px solid black;
}

#navbar ul li a {
    display: block;
    height: 100%;
}

#navbar a:link {
    font-weight:bold;
    color: black;
    font-family: Franklin Gorthic Heavy, Helvetica, sans-serif;
    text-decoration: none;
}

#navbar a:hover {
    background-color: #003300;
    color: gold;
}

#navbar a:visited {
    color: black;
}

a:active {
    background-color: #003300; 
    color: gold;
}

HTML：

    <div id="navbar">
        <ul>
            <li><a href="#home">HOME</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#news">NEWS</a></li>
            <li><a href="#reading">READING</a></li>
            <li><a href="#store">STORE</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
    </div>

这是一个参考屏幕截图:(家里有我的光标）

enter image description here 干杯

Answer 1

这是一个简单的例子：

http://jsfiddle.net/DFS5P/

Answer 2

然后你应该将一些li css移动到css - 就像这样

#navbar ul li {
    height: 50px;
    width: auto;
    float: left;

}

#navbar ul li a {
    display: block;
    height: 100%;
   padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    border-right: 1px solid black;
}

Answer 3

提供padding＆amp; height到锚定而不是 LI 。写得像这样：

#navbar ul li {
    float: left;
    border-right: 1px solid black;
}

#navbar ul li a {
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    height: 50px;
}

选中此http://jsfiddle.net/DFS5P/1/

Answer 4

尝试添加

width:100%;

为：

#navbar ul li a {
    display: block;
    height: 100%;
}

Answer 5

如果从列表项中删除填充并为其指定固定宽度，则可以根据需要使用。

#navbar ul li {
    height: 50px;
    width: 100px;
    float: left;
    line-height: 50px;
    border-right: 1px solid black;
}

<强> jsFiddle example

Answer 6

绝对不是最好的方式，但有时我只是将'li'移动到'a'标签内。这样，当你点击它时，'li'中的所有内容都会进入链接。

我工作得很好，但正如我所说，这不是最好的方式。

在整个<li> </li>中拉伸链接

6 个答案: