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

#header不足以让h1适合它。尝试制作width:100%

#header {
    width: 100%;
}

http://jsfiddle.net/MtcSY/

编辑：手动滚动此高级CSS可能非常困难，我建议使用像bootstrap这样的框架

Answer 2

试试这个。我还删除了一些不必要的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;
}

使用H1和Image特定显示内联块

2 个答案:

Fiddle