css - inline-block 与 H1 和 Image 的具体展示

Question

我正在制作我的页面，但在制作过程中我遇到了一个大问题，因为如果我做不到，我所有的努力都将白费。

在我的带有菜单的页眉和所有内容中，我无法制作 3 张图像和一个 H1 以内联显示。我不会发帖，但我已经尝试了一切，但没有用。在一个普通的网站上，它工作得很好，但我不知道为什么在我的网站上它不起作用……这是我的代码。

<div id="header">
<a href="index.php?lang=pl" class="languageFlag"><img src="img/pl.jpg" width="25" height="15" alt="pl"></a>
<a href="index.php?lang=no" class="languageFlag"><img src="img/no.jpg" width="25" height="15" alt="no"></a>
<a href="index.php?lang=en" class="languageFlag"><img src="img/usgb.jpg" width="25" height="15" alt="en"></a>
<h1 class="title"><?php echo $TITLE; ?></h1>
<div id="nav">
        <a href="#" class="nav1" onclick="show('aboutMe')"><?php echo $ABOUTME; ?></a>
        <a href="#" class="nav2" onclick="show('goals')"><?php echo $GOALS; ?></a>
        <a href="#" class="nav3" onclick="show('achievements')"><?php echo $ACHIEVEMENTS; ?></a>
        <a href="#" class="nav4" onclick="show('cv')"><?php echo $CV; ?></a>
        <a href="#" class="nav5" onclick="show('creativity')"><?php echo $CREATIVITY; ?></a>
        <a href="#" class="nav6" onclick="show('freetime')"><?php echo $FREETIME; ?></a>
        <a href="#" class="nav7" onclick="show('contact')"><?php echo $CONTACT; ?></a>
        <div class="navEnding"></div>
</div>

还有我的 CSS:

#header {
position:fixed;
margin:0;
padding:0;
top:0%;
left:0%;
width:20%;
height:100%;
z-index:50;
color:#f9f89d;
font-family:"Allura", cursive;
font-size:130%;
background:#f00;
}

.languageFlag { position:relative; display:inline-block; margin:0; padding:0; width:auto; }
.languageFlag img { display:inline-block; width:100%; height:100%; }
.title { position:relative; display:inline-block; margin:0%; padding:0; left:200%; width:200%; height:5%; overflow:hidden; }

#nav {
position:relative;
margin:0;
padding:0;
width:500%;
height:500%;
background:#00f;
}
#nav a:link, #nav a:visited {
display:inline-block;
margin:0.5% 0;
background:#385160;
text-align:left;
text-decoration:none;
border:0;
color:#f9f89d;
}
#nav a:hover, #nav a:active {
text-align:right;
}
.nav1 { width:55%; padding:0 40% 0 5%; }
.nav2 { width:45%; padding:0 50% 0 5%; }
.nav3 { width:35%; padding:0 60% 0 5%; }
.nav4 { width:30%; padding:0 65% 0 5%; }
.nav5 { width:25%; padding:0 70% 0 5%; }
.nav6 { width:20%; padding:0 75% 0 5%; }
.nav7 { width:15%; padding:0 80% 0 5%; }
.navEnding { display:inline-block; margin:0.5% 0;   background:#385160; width:90%; min-height:10%; }

Answer 1

试试这个。我还删除了一些不必要的 CSS。

Fiddle

CSS

#header {
    position:fixed;
    margin:0;
    padding:0;
    top:0%;
    left:0%;
    width:100%;
    height:20%;
    z-index:50;
    color:#f9f89d;
    font-family:"Allura", cursive;
    font-size:130%;
    background:#f00;
}
.languageFlag {
    position:relative;
    display:inline-block;
    margin:0;
    padding:0;
    width:auto;
}
.languageFlag img {
    display:inline-block;
    width:100%;
    height:100%;
}
.title {
    display:inline-block;
}