0
因此，我一直在使用HTML和CSS导航栏时遇到了一个非常简单的问题。我试图在我的导航栏中放置一个标记+标志+，但无论我做什么，我都无法在不添加行高的情况下实现它：x像素;到每一个单独的标签，但即使如此，有些不按预期工作。我试过使用文本对齐：中心;在我的#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