HTMLとCSSのナビゲーションバーについてはかなり簡単な問題がありました。私のタグを中心にしようとしています+ロゴ+私のナビゲーションバー内には、私が何をしても私はちょうどそれが行の高さを追加せずに起こるように見える:xピクセル;すべての別々のタグには、しかし、その後もいくつかの意図したように動作しません。私はtext-align:centerを使ってみました。私の#menuでは、それだけで動作していないようですか?申し訳ありませんが、それは愚かな質問ですが、私はちょうどそれを参照してくださいいけない場合...ナビゲーションバーのタグの中央揃え
HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css" type=text/css>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if(i < 10) {i = "0" + i};
return i;
}
</script>
</head>
<body onload="startTime()">
<nav id="menu">
<ul>
<img src="axelhalldin.png">
<li><a href="index.php" class="active">Hem</a></li>
<li><a href="game.html">Projekt</a></li>
<li><a href="about.html">Om mig</a></li>
<li><div id="clock"></div></li>
</ul>
</nav>
<div id="welcome"><center><h2>Välkommen!</h2> <p>Den här sidan är skapad för att visa upp mina projekt inom webbprogrammering, och även lite om mig själv. Använd menyn ovan för att ta dig runt i webbsidan. </p></center></div>
</div>
</body>
CSS:
body {
padding:0;
float:none;
margin:0;
}
#menu {
width:100%;
height:6.5em;
background-color:#00334d;
}
footer {
padding:0;
width:100%;
height:3em;
background-color:#00334d;
text-align:center;
}
#footerparagraph{
font-family:sans-serif;
font-style:italic;
color:lightgrey;
font-size:0.75em;
margin:0 -85em 0 0;
}
#myCanvas {
border-style:solid;
margin:5em 22em;
box-shadow:0em 0em 1.25em 0.5em;
}
#imageAxel {
border-style:solid;
border-width:0.3em;
border-radius:0.01em;
border-color:white;
box-shadow:;
margin-top:3.75em;
margin-left:-2.6em;
-webkit-transform: rotate270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
#clock {
float:right;
color:white;
margin:0em 2em 0em 0em;
font-family:sans-serif;
font-style:italic;
font-size:1.75em;
line-height:3.5em;
}
#about{
width:20em;
height:31.25em;
background-color:#00334d;
margin: 100px 125px;
padding:;
}
#aboutText {
width:40em;
height:31.25em;
background-color:#00334d;
margin:-600px 415px;
padding:;
}
a {
font-size:2em;
font-family:sans-serif;
text-decoration:none;
color:lightgrey;
padding:0.25em;
display:inline-block;
margin:1em 2em 0px 2em;
}
a.active {
border-style:solid;
border-width:2px;
border-color:white;
color:white:;
}
a:hover{
color:white;
}
h1 {
text-align:center;
font-family:sans-serif;
}
h2 {
color:white;
font-family:sans-serif;
text-align:center;
font-style:italic;
}
header {
background-color:#00334d;
color:white;
}
li {
display:inline;
}
p {
color:white;
padding:15px;
font-family:sans-serif;
margin:1.5em 0em;
}
ul {
text-decoration:none;
display:inline;
}
#welcome{
background-color:#00334d;
font-family:Verdana;
width:400px;
height:auto;
margin: 100px auto;
padding:30px;
}
#pAbout{
max-width:200px;
}
ご質問ありがとうございます@axul!これはあなたが提供できる最も単純な例ですか?最小の例は人々があなたをより速く助けるのを助けるでしょう... – Cyrus