我想创建一个包含顶部横幅，水平导航栏和两列的页面（文章的一个主列和侧面链接的一列）。但是，我有一些问题：
以下是HTML代码：
<html>
<head>
<title> Green Tea vault </title>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
</head>
<body>
<section id="maincontent">
<div id="banner">
<img src="image/Greentea.jpg"/>
<ul id="nav">
<li> <a href ="Home.html"> Home </a></li>
<li> <a href ="Cheesecakes.html"> Cheesecakes </a></li>
<li> <a href ="Cakes.html"> Cakes </a> </li>
<li> <a href ="Drinks"> Drinks </a> </li>
</ul>
</div>
<h1> Home of all the matcha goodness! </h1>
<p>
<iframe width="500" height="315" src="http://www.youtube.com/embed/lcu2op4x00s" frameborder="0" allowfullscreen></iframe>
</p>
<div id="maincolumn">
Match Tiramisu recipes
From: http://www.ohhowcivilized.com/blog/2013/6/20/step-by-step-recipe-matchamisu-matcha-green-tea-tiramisu.html
INGREDIENTS
Matcha Syrup
3/4 cup water
1/2 cup sugar
1 tablespoon matcha (I also like Aiya's Cooking Grade matcha.)
DIRECTIONS
1. Making the matcha syrup first, bring water (3/4 cup) and sugar (1/2 cup) to a boil. Simmer for 3 minutes and remove from heat. <br>
2. Let cool, then sift in the matcha (1 tablespoon). Whisk well. (This can be made up to a day before.) <br>
Now, moving onto the matcha sponge cake. <br>
...
Assembling the Matchamisu. <br>
16. In a small glass (we used these mini cups), put in a piece of the sponge cake. (We cut a smaller piece of cake to fit the tapered bottom of the cup.) <br>
17. Spoon on the matcha syrup over the sponge cake, making sure the sponge cake gets soaked with the syrup. Dollop the matcha cream on top. Layer on another piece of sponge cake. Pour on matcha syrup to the top level sponge cake. Add the final layer of matcha cream and dust with matcha. <br>
</id>
<div id="sidebar">![enter image description here][1]
<ul>
<li> <a href ="Japanrecipes.html"> Japan Recipes </a> </li>
<li> <a href="Koreanrecipes.html"> Korean Recipes </a> </li>
<li> <a href="Parisrecipes.html"> Paris Recipes </a> </li>
<li> <a href="Germanrecipes.html"> German Recipes </a> </li>
</ul>
</div>
</section>
</body>
</html>
CSS：
img {
width:500;
height:200;
border: solid green;
}
ul #nav {
list-style-type:none;
margin:0;
padding:0;
}
li {
display:inline;
}
a, a:visited {
display:block;
/*width:60;*/
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
a:hover, a:active {
background-color:#7A991A;
}
#maincontent {
background-color:peach;
position: absolute;
left:50%;
width: 300px;
margin-left: -150px;
}
#maincolumn {
float: left;
width: 90%;
margin-right: 3%; /add space between column/
margin-left: 3%;
}
#sidebar {
position: absolute;
top: 370px;
right: 0px;
width: 10%;
background: #EEE;
}
答案 0 :(得分：0)
快速解决导航栏问题，但请考虑验证您的HTML和CSS！
这样你的菜单就会水平显示：a, a:visited {
display:inline;
width: 100%;
text-decoration: none;
text-transform: uppercase;
color: #000000;
}
我在下面做了你想要达到的目标：
<强> HTML
<!DOCTYPE html>
<head>
<title>Green Tea vault</title>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
</head>
<body>
<section id="maincontent">
<div id="banner">
<img src="image/Greentea.jpg" alt="banner" />
<ul id="nav">
<li> <a href="Home.html"> Home </a>
</li>
<li> <a href="Cheesecakes.html"> Cheesecakes </a>
</li>
<li> <a href="Cakes.html"> Cakes </a>
</li>
<li> <a href="Drinks"> Drinks </a>
</li>
</ul>
</div>
<h1> Home of all the matcha goodness! </h1>
<p>
<iframe width="500" height="315" src="http://www.youtube.com/embed/lcu2op4x00s" allowfullscreen></iframe>
</p>
<div id="maincolumn">
<div class="left-column">Match Tiramisu recipes From: http://www.ohhowcivilized.com/blog/2013/6/20/step-by-step-recipe-matchamisu-matcha-green-tea-tiramisu.html INGREDIENTS Matcha Syrup 3/4 cup water 1/2 cup sugar 1 tablespoon matcha (I also like Aiya's Cooking Grade matcha.) DIRECTIONS 1. Making the matcha syrup first, bring water (3/4 cup) and sugar (1/2 cup) to a boil. Simmer for 3 minutes and remove from heat.
<br>2. Let cool, then sift in the matcha (1 tablespoon). Whisk well. (This can be made up to a day before.)
<br>Now, moving onto the matcha sponge cake.
<br>... Assembling the Matchamisu.
<br>16. In a small glass (we used these mini cups), put in a piece of the sponge cake. (We cut a smaller piece of cake to fit the tapered bottom of the cup.)
<br>17. Spoon on the matcha syrup over the sponge cake, making sure the sponge cake gets soaked with the syrup. Dollop the matcha cream on top. Layer on another piece of sponge cake. Pour on matcha syrup to the top level sponge cake. Add the final layer of matcha cream and dust with matcha.
<br>
</div>
<div class="right-column">
<div id="sidebar">
<ul>
<li> <a href="Japanrecipes.html"> Japan Recipes </a>
</li>
<li> <a href="Koreanrecipes.html"> Korean Recipes </a>
</li>
<li> <a href="Parisrecipes.html"> Paris Recipes </a>
</li>
<li> <a href="Germanrecipes.html"> German Recipes </a>
</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>
<强> CSS
img {
width:500px;
height:200px;
border: solid green;
}
#nav {
list-style-type:none;
margin:0;
padding:0;
width: 100%;
}
li {
display:inline;
}
a, a:visited {
display:inline;
width: 100%;
text-decoration: none;
text-transform: uppercase;
color: #000000;
}
a:hover, a:active {
background-color:#7A991A;
}
#maincontent {
background-color:beige;
position: absolute;
left:50%;
width: 500px;
margin-left: -150px;
}
#maincolumn {
float: left;
width: 90%;
margin-right: 3%;
/*add space between column*/
margin-left: 3%;
}
#sidebar {
background: #EEE;
}
.left-column {
width: 70%;
float: left;
}
.right-column {
width: 25%;
float: left;
}