0

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>

这是一个供参考的屏幕截图：（主页上有我的光标）

在此处输入图像描述 干杯

4

6 回答 6

2

这是一个简单的例子：

http://jsfiddle.net/DFS5P/

于 2012-08-29T14:52:21.283 回答
1

给你的&padding锚而不是LI。像这样写：height

#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/

于 2012-08-29T14:55:17.537 回答
1

然后你应该将一些 li css 移动到 a 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;
}
于 2012-08-29T14:49:16.367 回答
0

如果您从列表项中删除填充并给它们一个固定的宽度，它会根据您的需要工作。

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

jsFiddle 示例

于 2012-08-29T14:52:55.603 回答
0

这绝对不是最好的方法，但有时我只是将整个 'li' 移动到 'a' 标签内。这样，当您单击它时，“li”中的所有内容都会转到链接。

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

于 2012-08-29T14:53:27.047 回答
0

尝试添加

width:100%;

至：

#navbar ul li a {
    display: block;
    height: 100%;
}
于 2012-08-29T14:50:54.963 回答