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

标签 html css html-table navbar css-tables

我曾尝试寻找解决方案，但都没有帮助。现在我有一个垂直导航栏，在左边，我也做了一张 table ，但 table 在导航栏下面。我不知道如何让他们并排走。我认为这可能与我没有任何类型的 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>

最佳答案

您可以从 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>

关于html - 如何在垂直导航栏旁边移动表格(或其他内容)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32663060/

上一篇：javascript - 如何不将 toggle() 应用于已经显示 : none? 的 div 元素

下一篇：jquery - 光滑的 slider 箭头在响应模式下表现得像幻灯片

相关文章：

css - 表格第一列跳出overflow-y :auto;

javascript - 按条件将文本/内容从 td 复制到另一个 td

html - -webkit-backface-visibility 的潜在魔力

javascript - 动态添加一个空白行到html表格

javascript - 禁用任何类型的浏览器窗口滚动？

javascript - AngularJS/HTML 表格格式化

html - CSS - 为什么我的跨度需要 float 来显示具有固定宽度和高度的图像？

javascript - 如何根据其他 2 个 HTML 输入之间的焦点切换隐藏/显示按钮？

html - 如何使我的 css 标题响应

javascript - 如何在 JavaScript 中设置元素的 style.top 属性？

©2024 IT工具网  联系我们