html - 如何将图标放在标题旁边？

Question

我已经写了一段时间的网站，我有一个小的，我想修复的外观错误。

这是代码

HTML

<div id="page">

    <ul id="icons">
        <li><object type="image/svg+xml" data="images/pl.svg"></object></li>
        <li><object type="image/svg+xml" data="images/gb.svg"></object></li>
    </ul>
    <div style="clear: both;"></div>
    <header>
        RYSZARD KUKLIŃSKI
    </header>
</div>

CSS

header {
    font-family: 'Poppins', sans-serif;
    font-size: 1.688em;
    text-align: center;
    font-weight: 700;
    display: block;
    letter-spacing: 1px;

    margin-left: auto;
    margin-right: auto;
    max-width: 40%;
    border-radius: 5px;
    margin-top: 10px;
    background-color: #e60000;
    padding-top: 10px;
    padding-bottom: 10px;

    border: 5px solid #a20000;
}
#icons {
    list-style: none;

    margin: 0;
    padding: 0;
    float: right;

    margin-top: 10px;
    margin-right: 5px;
}
#icons li {
    display: inline-block;
}
object {
    height: 16px;
    width: 32px;

}

您还可以在此处查看我正在谈论的内容的实时版本:www.ryszardkuklinski.pl (请记住，该网站仍在开发中，尚未发布)，或在下面的照片上:

问题出在这些图标上:波兰国旗和右上角的英国国旗。这些图标放在标题上方，我无法将它们放在标题旁边。我的意思是同一级别，不低于它，也不高于它。我希望你能理解我。我正在等待回复 :) 通常，这些图标的目的是重定向到使用不同语言的站点。

Answer 1

请使用以下样式更新 css 中的 id '#icons'。

#icons {
    position: absolute;    
    right: 0; 

    list-style: none;
    margin: 0;
    padding: 0;
    float: right;
    margin-top: 10px;
    margin-right: 5px;
}