如何将标题放在标题旁边?

时间:2017-03-03 12:36:04

标签: html css html5 css3

我已经写了一段时间的网站了,我想解决一个小的美容错误。

代码

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(请记住,该网站仍在开发中,但尚未发布),或者照片如下:

Photo of preview

问题在于这些图标:波兰国旗和右上角的英国人。这些图标位于标题上方,我无法将它们放在标题旁边。我的意思是同一级别,而不是在它之下,而不是在上面。我希望你理解我。我在等待回复:)一般来说,这些图标的目的是用不同的语言重定向到网站。

2 个答案:

答案 0 :(得分:1)

请使用以下样式更新css中的ID“#icons”。

#icons {
    position: absolute;    
    right: 0; 

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

答案 1 :(得分:0)

在以下代码中使用以下代码:

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