使用display：inline来创建水平条(Using display:inline to create horizontal bar)
我想创建一个页面，顶部横幅，水平导航栏和两列（文章的一个主列和侧面链接的一列）。但是，我有一些问题：
我使用display：inline作为水平导航栏，但它仍然显示为垂直条 在我读过的书中，它说如果我将div #maincolumn向左浮动，侧边栏将自动向右流动，但我发现它与视频重叠。 反正我可以使用浮动吗？这是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; }I wanted to create a page with a top banner, a horizontal navigation bar, and two columns (one main column for article and one column for side links).However, I have a few problems:
I used display:inline for the horizonal nav bar but it is still displayed as a vertical bar In the book I read, it says if I float the div #maincolumn left, the sidebar will automatically flow to the right but I see that it is overlapping with the video. Is there anyway I can use float right for this?Here is the HTML code:
<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; }最满意答案
快速解决导航栏问题，但请考虑验证您的HTML和CSS！
CSS VALIDATOR
HTML验证者
这样你的菜单就会水平显示：
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; }quick solution to your navigation bar problem, but please consider to validate your HTML and CSS!
CSS VALIDATOR
HTML VALIDATOR
this way your menu will be displayed horizontal:
a, a:visited { display:inline; width: 100%; text-decoration: none; text-transform: uppercase; color: #000000; }I made what you were trying to achieve in the following:
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; }更多推荐
发布评论