我试过寻找解决方案，但没有人帮助过。现在我在左边有一个垂直导航栏，我也做了一张桌子，但桌子正在导航栏下面。我无法弄清楚如何让它们并排走。我认为这可能与我没有任何类型的div有关，但是当我尝试添加div时它没有解决问题，除非我在放置它或使用我的CSS时做错了。这就是我现在所得到的。
body {
margin: 0px;
padding: 0px;
background: lavenderblush;
}
header {
padding: 0px 0px 20px 0px;
margin: 0px;
}
h1 {
margin: 0px;
padding: 5px;
font-family: 'Indie Flower', cursive;
font-size: 55px;
}
ul {
list-style-type: none;
margin: 1px;
padding: 0px;
border: 0px solid honeydew;
width: 120px;
border-radius: 5px;
}
a {
font-family: 'Indie Flower', cursive;
display: block;
width: 80px;
background: honeydew;
text-align: center;
text-decoration: none;
font-size: 25px;
color: cadetblue;
padding: 20px;
margin: 0px;
}
li.active a {
color: black;
background: lavenderblush;
border: 1px solid lavenderblush;
border-radius: 0px;
}
a:hover {
color: black;
}
table {
border-collapse: collapse;
width: 500px;
font-family: 'Indie Flower', cursive;
font-size: 20px;
}
table, td, th {
border: 1px solid black;
}<!doctype html>
<html>
<head>
<title>Homepage</title>
<link href="main.css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>Italian Glossary</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="active"><a href="italianfood.html">Food</a></li>
<li><a href="#">Animals</a></li>
<li><a href="#">Verbs</a></li>
</ul>
</nav>
<table align="center">
<tr><th>Italian</th><th>English</th></tr>
<tr><td>Acqua</td><td>Water</td></tr>
<tr><td>Aglio</td><td>Garlic</td></tr>
<tr><td>Arancia</td><td>Orange</td></tr>
<tr><td>Banana</td><td>Banana</td></tr>
<tr><td>Bevanda</td><td>Beverage</td></tr>
<tr><td>Bira</td><td>Beer</td></tr>
<tr><td>Biscotto</td><td>Cookie</td></tr>
<tr><td>Bistecca</td><td>Steak</td></tr>
<tr><td>Burro</td><td>Butter</td></tr>
<tr><td>Caffe</td><td>Coffee</td></tr>
<tr><td>Caramella</td><td>Candy</td></tr>
<tr><td>Carne</td><td>Meat</td></tr>
<tr><td>Carota</td><td>Carrot</td></tr>
<tr><td>Cioccolato</td><td>Chocolate</td></tr>
<tr><td>Cipolla</td><td>Onion</td></tr>
<tr><td>Creama</td><td>Cream</td></tr>
<tr><td>Dolce</td><td>Sweet</td></tr>
<tr><td>Fagiolo</td><td>Bean</td></tr>
<tr><td>Fragola</td><td>Strawberry</td></tr>
<tr><td>Frito</td><td>Fried</td></tr>
<tr><td>Frutta</td><td>Fruit</td></tr>
<tr><td>Funghi</td><td>Mushroom</td></tr>
<tr><td>Gelato</td><td>Ice Cream</td></tr>
<tr><td>Ghiaccio</td><td>Ice </td></tr>
<tr><td>Insalata</td><td>Salad</td></tr>
<tr><td>Latte</td><td>Millk</td></tr>
<tr><td>Limonata</td><td>Lemonade</td></tr>
<tr><td>Limone</td><td>Lemon</td></tr>
<tr><td>Maiale</td><td>Pork</td></tr>
<tr><td>Manzo</td><td>Beef</td></tr>
<tr><td>Marmellata</td><td>Jam</td></tr>
<tr><td>Mela</td><td>Apple</td></tr>
<tr><td>Olio</td><td>Oil</td></tr>
<tr><td>Pane</td><td>Bread</td></tr>
<tr><td>Panino</td><td>Sandwich</td></tr>
<tr><td>Pasta</td><td>Pasta</td></tr>
<tr><td>Patata</td><td>Potato</td></tr>
<tr><td>Pepe</td><td>Pepper</td></tr>
<tr><td>Pesce</td><td>Fish</td></tr>
<tr><td>Pollo</td><td>Chicken</td></tr>
<tr><td>Pomodoro</td><td>Tomato</td></tr>
<tr><td>Riso</td><td>Rice</td></tr>
<tr><td>Sale</td><td>Salt</td></tr>
<tr><td>Salciccia</td><td>Sausage</td></tr>
<tr><td>Succo</td><td>Juice</td></tr>
<tr><td>Tacchino</td><td>Turkey</td></tr>
<tr><td>Te</td><td>Tea</td></tr>
<tr><td>Torta</td><td>Cake</td></tr>
<tr><td>Uovo</td><td>Egg</td></tr>
<tr><td>Uva</td><td>Grape</td></tr>
<tr><td>Verdura</td><td>Vegetables</td></tr>
<tr><td>Vino</td><td>Wine</td></tr>
<tr><td>Zucchero</td><td>Sugar</td></tr>
<tr><td>Zuppa</td><td>Soup</td></tr>
</table>
</body>
</html>
答案 0 :(得分：2)
要解决此问题，您可以将nav元素浮动到左侧。这样，桌子就会显示在它的右侧，只有在屏幕不够宽并且并排显示它们时才会显示在它下方。
nav {
float: left;
}
JSFiddle：https://jsfiddle.net/5fxnpwLu/
答案 1 :(得分：2)
您可以从display元素更改nav并将表格包装在div
body {
margin: 0px;
padding: 0px;
background: lavenderblush;
}
header {
padding: 0px 0px 20px 0px;
margin: 0px;
}
h1 {
margin: 0px;
padding: 5px;
font-family: 'Indie Flower', cursive;
font-size: 55px;
}
ul {
list-style-type: none;
margin: 1px;
padding: 0px;
border: 0px solid honeydew;
width: 120px;
border-radius: 5px;
}
a {
font-family: 'Indie Flower', cursive;
display: block;
width: 80px;
background: honeydew;
text-align: center;
text-decoration: none;
font-size: 25px;
color: cadetblue;
padding: 20px;
margin: 0px;
}
li.active a {
color: black;
background: lavenderblush;
border: 1px solid lavenderblush;
border-radius: 0px;
}
a:hover {
color: black;
}
table {
border-collapse: collapse;
width: 500px;
font-family: 'Indie Flower', cursive;
font-size: 20px;
}
table, td, th {
border: 1px solid black;
}
nav { display: inline-block; vertical-align: top; }
.table-wrapper { display: inline-block; }
**HTML:**<!doctype html>
<html>
<head>
<title>Homepage</title>
<link href="main.css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>Italian Glossary</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="active"><a href="italianfood.html">Food</a></li>
<li><a href="#">Animals</a></li>
<li><a href="#">Verbs</a></li>
</ul>
</nav>
<div class="table-wrapper">
<table align="center">
<tr><th>Italian</th><th>English</th></tr>
<tr><td>Acqua</td><td>Water</td></tr>
<tr><td>Aglio</td><td>Garlic</td></tr>
<tr><td>Arancia</td><td>Orange</td></tr>
<tr><td>Banana</td><td>Banana</td></tr>
<tr><td>Bevanda</td><td>Beverage</td></tr>
<tr><td>Bira</td><td>Beer</td></tr>
<tr><td>Biscotto</td><td>Cookie</td></tr>
<tr><td>Bistecca</td><td>Steak</td></tr>
<tr><td>Burro</td><td>Butter</td></tr>
<tr><td>Caffe</td><td>Coffee</td></tr>
<tr><td>Caramella</td><td>Candy</td></tr>
<tr><td>Carne</td><td>Meat</td></tr>
<tr><td>Carota</td><td>Carrot</td></tr>
<tr><td>Cioccolato</td><td>Chocolate</td></tr>
<tr><td>Cipolla</td><td>Onion</td></tr>
<tr><td>Creama</td><td>Cream</td></tr>
<tr><td>Dolce</td><td>Sweet</td></tr>
<tr><td>Fagiolo</td><td>Bean</td></tr>
<tr><td>Fragola</td><td>Strawberry</td></tr>
<tr><td>Frito</td><td>Fried</td></tr>
<tr><td>Frutta</td><td>Fruit</td></tr>
<tr><td>Funghi</td><td>Mushroom</td></tr>
<tr><td>Gelato</td><td>Ice Cream</td></tr>
<tr><td>Ghiaccio</td><td>Ice </td></tr>
<tr><td>Insalata</td><td>Salad</td></tr>
<tr><td>Latte</td><td>Millk</td></tr>
<tr><td>Limonata</td><td>Lemonade</td></tr>
<tr><td>Limone</td><td>Lemon</td></tr>
<tr><td>Maiale</td><td>Pork</td></tr>
<tr><td>Manzo</td><td>Beef</td></tr>
<tr><td>Marmellata</td><td>Jam</td></tr>
<tr><td>Mela</td><td>Apple</td></tr>
<tr><td>Olio</td><td>Oil</td></tr>
<tr><td>Pane</td><td>Bread</td></tr>
<tr><td>Panino</td><td>Sandwich</td></tr>
<tr><td>Pasta</td><td>Pasta</td></tr>
<tr><td>Patata</td><td>Potato</td></tr>
<tr><td>Pepe</td><td>Pepper</td></tr>
<tr><td>Pesce</td><td>Fish</td></tr>
<tr><td>Pollo</td><td>Chicken</td></tr>
<tr><td>Pomodoro</td><td>Tomato</td></tr>
<tr><td>Riso</td><td>Rice</td></tr>
<tr><td>Sale</td><td>Salt</td></tr>
<tr><td>Salciccia</td><td>Sausage</td></tr>
<tr><td>Succo</td><td>Juice</td></tr>
<tr><td>Tacchino</td><td>Turkey</td></tr>
<tr><td>Te</td><td>Tea</td></tr>
<tr><td>Torta</td><td>Cake</td></tr>
<tr><td>Uovo</td><td>Egg</td></tr>
<tr><td>Uva</td><td>Grape</td></tr>
<tr><td>Verdura</td><td>Vegetables</td></tr>
<tr><td>Vino</td><td>Wine</td></tr>
<tr><td>Zucchero</td><td>Sugar</td></tr>
<tr><td>Zuppa</td><td>Soup</td></tr>
</table>
</div>
</body>
</html>