HTML a 元素不会扩展到父 li 尺寸

发布于 2024-12-29 08:00:23 字数 1417 浏览 0 评论 0原文

我有一个水平导航栏，并且我的 a 元素没有扩展到宽度和宽度。父 li 元素的高度。

如何修复我的 CSS，使 a 元素的宽度和宽度一样大？与外部/父 li 元素一样高？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
    <!--
        #navbar {
            width: 450px;
            height: 40px;
            background-color: RGB(112,112,112);
            list-style: none;
        }

        #navbar li {
            width: 112.5px;
            height: 40px;
            display: inline; 
            float: left;
        }

        #navbar li a {
            color: white;
            width: 112.5px;
            height: 40px;
        }

        #navbar a:link {
            background-color: red;
        }

        #navbar a:visited {
            background-color: purple;
        }

        #navbar a:active {
            background-color: green;
        }
        #navbar a:hover {
            background-color: blue;
        }
    -->
    </style>
</head>
<body>

    <ul id="navbar">
        <li><a href="">home</a></li>
        <li><a href="">contact us</a></li>
        <li><a href="">about us</a></li>
        <li><a href="">other</a></li>
    </ul>

</body>
</html>

原文

I have a horizontal nav bar, and my a elements are not expanding to be the width & height of the parent li element.

How can I fix my CSS so that the a elements are as wide & tall as the outer/parent li element?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
    <!--
        #navbar {
            width: 450px;
            height: 40px;
            background-color: RGB(112,112,112);
            list-style: none;
        }

        #navbar li {
            width: 112.5px;
            height: 40px;
            display: inline; 
            float: left;
        }

        #navbar li a {
            color: white;
            width: 112.5px;
            height: 40px;
        }

        #navbar a:link {
            background-color: red;
        }

        #navbar a:visited {
            background-color: purple;
        }

        #navbar a:active {
            background-color: green;
        }
        #navbar a:hover {
            background-color: blue;
        }
    -->
    </style>
</head>
<body>

    <ul id="navbar">
        <li><a href="">home</a></li>
        <li><a href="">contact us</a></li>
        <li><a href="">about us</a></li>
        <li><a href="">other</a></li>
    </ul>

</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

阳光下慵懒的猫 2025-01-05 08:00:23

通过使所有 a 元素 display:block

但是为什么，sdleihssirhc？为什么？

因为默认情况下元素是内联元素，这意味着（除许多其他因素之外）您无法为其指定宽度或高度。如果您尝试，浏览器将忽略您。

回复收藏 0 原文

过潦 2025-01-05 08:00:23

使所有 a 元素 display: inline-block。

它结合了两全其美 - 您可以将它们并排放置，无需 float，并为它们提供任何 width 和 height > 你选择。您甚至可以使用vertical-align来确定它如何与周围的文本对齐！

回复收藏 0 原文

暮年慕年 2025-01-05 08:00:23

我缩进了额外的线条以帮助美观。正如 sdleihssirhc 所提到的，a 元素必须设置为 display:block。还要注意，通过在顶部添加一些填充（并从块的整体高度中减去），我们也有一些垂直居中。

<style type="text/css">
<!--
#navbar {
    width: 450px;
    height: 40px;
    background-color: RGB(112,112,112);
    list-style: none;
        padding: 0;
}

#navbar li {
    width: 112.5px;
    height: 40px;
    display: inline; 
    float: left;
}

#navbar li a {
        display: block;
        float:left;
        padding-top: 6px;
        text-align: center;
    color: white;
    width: 112.5px;
    height: 34px;
}

#navbar a:link {
    background-color: red;
}

#navbar a:visited {
    background-color: purple;
}

#navbar a:active {
    background-color: green;
}
#navbar a:hover {
    background-color: blue;
}
-->
</style>

I have indented the additional lines to help with appearance. The a elements must be set to display:block as mentioned by sdleihssirhc. Notice also that by adding some padding to the top ( and subtracting from the overall height of the block) we have some vertical centering as well.

<style type="text/css">
<!--
#navbar {
    width: 450px;
    height: 40px;
    background-color: RGB(112,112,112);
    list-style: none;
        padding: 0;
}

#navbar li {
    width: 112.5px;
    height: 40px;
    display: inline; 
    float: left;
}

#navbar li a {
        display: block;
        float:left;
        padding-top: 6px;
        text-align: center;
    color: white;
    width: 112.5px;
    height: 34px;
}

#navbar a:link {
    background-color: red;
}

#navbar a:visited {
    background-color: purple;
}

#navbar a:active {
    background-color: green;
}
#navbar a:hover {
    background-color: blue;
}
-->
</style>

回复收藏 0 原文

梨涡 2025-01-05 08:00:23

按如下方式修改 CSS：

#navbar li a {
...
    display: table;
    height: 100%;
    width: 100%;
...
}

Modify your CSS as follows:

#navbar li a {
...
    display: table;
    height: 100%;
    width: 100%;
...
}

回复收藏 0 原文

~没有更多了~

关于作者

两相知

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

HTML a 元素不会扩展到父 li 尺寸

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

hn8888

liai0114

以酷

阿楠

郝学勇

烟燃烟灭

友情链接

HTML a 元素不会扩展到父 li 尺寸

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

hn8888

liai0114

以酷

阿楠

郝学勇

烟燃烟灭

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。