html - 这HTML 元素未按预期工作

Question

我正在尝试创建一个简单的网页，其中包含一些指向页面右上角其他页面的链接。我已经设法正确放置链接，但后来我注意到链接不在 div 块中，正如我所期望的那样。这是网页现在的样子

如果您查看我的 css 代码，您会看到我为 div 元素提供了一个白色的底边框，但您所看到的只是顶部的一条白线（无序列表上方），这意味着我的无序列表项是应该在 div 元素内而不是在它之外。我意识到这是因为班级的float: right财产。links_header删除它后，我从 div 元素中获得了所需的行为。

我的问题是这个。float 属性如何影响 div 元素以及如何将有序列表项放在右侧并获得所需的外观？ 我对 HTML 和 CSS 很陌生，所以如果我在任何地方犯了错误，请原谅我。

body
{
    background-color: #171717;
}

.links_header
{
    border-bottom: 2px solid white;
}

.links_list
{
    float: right;
    list-style-type: none;
    margin-top:25px;
}

ul li
{
    display: inline-block;
    padding-top: 20px;
}

.links
{
    font-family: "Helvetica", "Verdana", "Arial";
    text-decoration: none;
    color: white;
    padding: 10px 25px;
    border: 1px solid white;
}

.links:hover
{
    text-decoration: none;
    background-color: white;
    color: #171717;
}

<div class="links_header">
    <ul class="links_list">
        <li><a href="#" class="links">Home</a></li>
        <li><a href="#" class="links">Certifications & Projects</a></li>
        <li><a href="#" class="links">About Me</a></li>
        <li><a href="#" class="links">Contact Me</a></li>
    </ul>
</div>

标签： htmlcss

Answer 1

添加overflow: hidden到.links_header

body
{
    background-color: #171717;
}

.links_header
{
    border-bottom: 2px solid white;
    overflow: hidden;
}

.links_list
{
    float: right;
    list-style-type: none;
    margin-top:25px;
}

ul li
{
    display: inline-block;
    padding-top: 20px;
}

.links
{
    font-family: "Helvetica", "Verdana", "Arial";
    text-decoration: none;
    color: white;
    padding: 10px 25px;
    border: 1px solid white;
}

.links:hover
{
    text-decoration: none;
    background-color: white;
    color: #171717;
}

<div class="links_header">
    <ul class="links_list">
        <li><a href="#" class="links">Home</a></li>
        <li><a href="#" class="links">Certifications & Projects</a></li>
        <li><a href="#" class="links">About Me</a></li>
        <li><a href="#" class="links">Contact Me</a></li>
    </ul>
</div>