Question

我在这里有以下代码，我正在玩。我目前的问题是，当我重新设置我的浏览器窗口时，保存文本“mail @ mail com”的表/部分将移动到下一行，以便它放置在导航栏上。如果有人调整浏览器窗口大小，我怎么能不这样做呢？

<head>

    <title>some title</title>
    <link href="style.css" rel="stylesheet">

<body>

<div id="header">
</div>

<div id="nav">

<a href="index.html"><img src="img/info.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="pris.html"><img src="img/pris.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="bokning.html"><img src="img/bokning.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="bat.html"><img src="img/bat.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="schema.html"><img src="img/schema.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="tavling.html"><img src="img/tavling.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="arrang.html"><img src="img/arrang.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="kontakt.html"><img src="img/kontakt.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>

<a href="index.html"><img src="img/lamb.jpg" alt="HTML5 Icon" style="width:162px;height:162px"></a>

</head>

    </div>

<div id="section" width="100%">
<h1>KONTAKT</h1>
<p>
<div id="kontakt" align="center">

<font size="4">
questions? 
<br><br></font>
<font size="6">mail @ mail com
</font><br><br>

<img src="img/rockstar.png" alt="HTML5 Icon" style="width:350px;height:350px">


</p>
    </div>
        </div>

<div id="footer">
<br>
Copyright © you!!
</div>

</body>


#header {
    background-color:white;
    background-image: url("img/head.png");
    background-repeat: no-repeat;
    background-position: center;    
    color:white;
    text-align:center;
    padding:5px;
    height:130px;
    width:1450px;
    margin-left: auto ;
    margin-right: auto ;

}
#nav {
    line-height:30px;
    background-color:#white;
    height:300px;
    width:162px;
    float:left;
    padding:5px; 

}

#nav1 {
    line-height:30px;
    background-color:#white;
    height:10px;
    float:left;
    padding:5px; 
}

#nav2 {
    line-height:30px;
    background-color:#white;
    height:10px;
    float:left;
    padding:5px; 
}

#nav3 {
    line-height:30px;
    background-color:#white;
    height:10px;
    float:right;
    padding:5px; 
}


#section {
    background-color:white;
    background-image: url("img/bakgrund.png");
    background-repeat: no-repeat;
    background-position: center; 
    width:1450px;
    float:left;
    padding:10px; 
    text-align:center;
    height:600px;


}

#innersection {
    line-height:20px;   
    width:650px;
    height:600px;
    float:center;
    padding:10px; 
    margin-left: auto ;
    margin-right: auto ;
    text-align:left;    
}

#kontakt {
    line-height:20px;   
    width:650px;
    height:600px;
    float:center;
    padding:10px; 
    margin-left: auto ;
    margin-right: auto ;
    text-align:center;  
}


#footer {
    h1   {color:white}  
    background-color:white;
    background-image: url("img/foot.png");
    background-repeat: no-repeat;
    background-position: center; 
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
    height:85px;
}

Answer 1

您的HTML需要一些帮助。此外，您应该避免在HTML中使用字体标记。您可以在css中控制字体大小。我假设所有这些底部的CSS是你在你的链接中的外部样式表吗？我有点为你清理了你的代码，但要处理这些小事情还有很多。例如，align =＆＃34; center＆＃34;已经过时了，不应该使用。如果您想要居中文字，请在您的CSS中使用text-align：center。

这是一个至少让你走上正确道路的开始！

<head>

    <title>some title</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>

<div id="header">
</div>

<div id="nav">
<a href="index.html"><img src="img/info.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="pris.html"><img src="img/pris.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="bokning.html"><img src="img/bokning.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="bat.html"><img src="img/bat.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="schema.html"><img src="img/schema.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="tavling.html"><img src="img/tavling.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="arrang.html"><img src="img/arrang.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>
<a href="kontakt.html"><img src="img/kontakt.png" alt="HTML5 Icon" style="width:162px;height:50px"></a>

<a href="index.html"><img src="img/lamb.jpg" alt="HTML5 Icon" style="width:162px;height:162px"></a>    
    </div>

<div id="section" width="100%">
<h1>KONTAKT</h1>
<p>
<div id="kontakt" align="center">

<font size="4">
questions? 
<br><br></font>
<font size="6">mail @ mail com
</font><br><br>

<img src="img/rockstar.png" alt="HTML5 Icon" style="width:350px;height:350px">


    </div>
        </div>

<div id="footer">
<br>
Copyright © you!!
</div>

</body>


#header {
    background-color:white;
    background-image: url("img/head.png");
    background-repeat: no-repeat;
    background-position: center;    
    color:white;
    text-align:center;
    padding:5px;
    height:130px;
    width:1450px;
    margin-left: auto ;
    margin-right: auto ;

}
#nav {
    line-height:30px;
    background-color:#white;
    height:300px;
    width:162px;
    float:left;
    padding:5px; 

}

#nav1 {
    line-height:30px;
    background-color:#white;
    height:10px;
    float:left;
    padding:5px; 
}

#nav2 {
    line-height:30px;
    background-color:#white;
    height:10px;
    float:left;
    padding:5px; 
}

#nav3 {
    line-height:30px;
    background-color:#white;
    height:10px;
    float:right;
    padding:5px; 
}


#section {
    background-color:white;
    background-image: url("img/bakgrund.png");
    background-repeat: no-repeat;
    background-position: center; 
    width:1450px;
    float:left;
    padding:10px; 
    text-align:center;
    height:600px;


}

#innersection {
    line-height:20px;   
    width:650px;
    height:600px;
    float:center;
    padding:10px; 
    margin-left: auto ;
    margin-right: auto ;
    text-align:left;    
}

#kontakt {
    line-height:20px;   
    width:650px;
    height:600px;
    float:center;
    padding:10px; 
    margin-left: auto ;
    margin-right: auto ;
    text-align:center;  
}


#footer {
    h1   {color:white}  
    background-color:white;
    background-image: url("img/foot.png");
    background-repeat: no-repeat;
    background-position: center; 
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
    height:85px;
}

为什么这不在同一条线上？

1 个答案: