如何将表格(或其他内容)移动到垂直导航栏旁边

3
我已经尝试过寻找解决方案,但是没有一个能帮到我。现在我有一个垂直导航栏,在左边,我也制作了一个表格,但是表格却在导航栏下面。我无法弄清楚如何让它们并排显示。我认为这可能与我没有任何类型的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>

2个回答

2
您可以从 nav 元素中更改 display,并将表格包装在 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>


2
为了解决这个问题,您可以将nav元素向左浮动。这样,当屏幕足够宽时,表格将显示在其右侧,仅在屏幕不足以同时显示它们时才会显示在其下方。请保留HTML标签。
nav {
    float: left;
}

JSFiddle: https://jsfiddle.net/5fxnpwLu/


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接