Question

我有一个嵌套在父元素中的链接元素的代码，类似于：

<div class="container">
    <div class="navbar">
        <li><a href="#" class="linkitem">Hello</a></li>
        <li><a href="#" class="linkitem">Hello</a></li>
        <li><a href="#" class="linkitem">Hello</a></li>
        <img src="img">
    </div>
</div>

我想这样做，以便链接占据导航栏的高度，这取决于图像的高度和各种边距/填充属性。我想这样做，所以我可以创建一些css使得它看起来链接所在的导航栏部分的整个背景在链接悬停时改变颜色，如下所示：

.navbar > li > a:hover {
background-color:red;
}

但是现在看来，只会突出显示链接文本的小背景，而不是包含链接的导航栏的整个部分。我不想做li:hover，因为我只希望在选择实际链接文本时背景改变颜色。想法？

Answer 1

如果我理解你的问题，修复很容易;只需将display:block;应用于锚标记：

.navbar > li > a {
  display:block;   
}

请在此处查看：http://jsfiddle.net/DrTH9/

<强>文档

CSS display - https://developer.mozilla.org/en-US/docs/CSS/display

Answer 2

试试这个：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="container">
        <ul class="navbar">
            <li><a href="#" class="linkitem">Hello</a></li>
            <li><a href="#" class="linkitem">Hello</a></li>
            <li><a href="#" class="linkitem" >Hello</a></li>
            <li class="imgItem">
                <img src="http://placehold.it/50"  />
            </li>
        </ul>
    </div>
    <style>
        .container,
        .navbar,
        .navbar li,
        .navbar li a
        {
            margin: 0;
            padding: 0;
        }
        .navbar{
            display: table;
        }
        .navbar li{
            display: table-cell;
            padding: 0 1em; /* you can have horizontal padding on these if you like */
            vertical-align: middle;
        }
        .navbar li.imgItem{
            padding: 0; /* Clear padding from image item */
        }
        .navbar li.hover,
        .navbar li:hover{
            background: red;
            cursor: pointer;
        }
        .navbar img{
            margin: -5px 0 0 0;
            top: 5px;
            position: relative;
            /* 
                This fixes a weird bug where the table puts 5px on the bottom of an image that defines a cell's height. 
                NO idea why this is. You may need to mess with this.
            */
        }
    </style>
</body>
</html>

采取容器高度的动态方式？

2 个答案: