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

问题描述：

我一直在写一个网站，我有一个小的，我想修复的整容错误。如何将图标放在标题旁边？

这是代码

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（保持考虑到该网站仍处于开发阶段，并且尚未发布），或者即将发布以下ae照片：

Photo of preview

问题是与这些图标：波兰国旗和英国在右上角。这些图标放在标题上方，我不能让它们放在标题旁边。我的意思是相同的水平，不是在它下面，而不是在上面。我希望你能理解我。我正在等待回复:)通常，这些图标的目的是用不同的语言重定向到网站。

尝试绝对定位标志 - 使'＃页面'相对和'#icons {position：absolute;顶部：10px;右：为5px; }'并从图标上删除边距 – Pete

答

使用下面的代码：

<head> 
     <link rel="shortcut icon" href="url of image" type="image/ico" /> 
</head>

它不起作用。我的意思是用作国旗的矢量图像。看看上面的照片，有两个国家的国旗将被认为是将用户重定向到另一种语言的网站。问题是，这些国家的国旗或图标让我们说不像HTML中的“标题”标签那样处于相同的级别。这些标志高于标题的级别，这就是事情。我希望这些国家的国旗像头一样的水平。我希望你能抓住我的偏见。 –

答

请与下面的款式更新在CSS的ID '#icons'。

#icons { 
    position: absolute;  
    right: 0; 

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

正确。并删除“浮动：正确” – Johannes

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

相关推荐