调整Box模型布局

时间：2018-02-19 17:17:23

标签： html css layout

我试图将表格放在下面的代码中，以便它不会拥抱左边框墙。我似乎无法确定问题所在。截至目前，第2列中的表格向左浮动并触及边框的左侧墙壁。我需要它在框中更加集中。有帮助吗？我需要表格如下：1。

＆＃13;
＆＃13; 
   header {
    text-align: center;
    font-size: 30px;
    font-style: bold;
    font-style: italic;
  }
  
  #column-1 {
    float: left;
    background-color: lightblue;
    width: 25%;
    border: 5px solid red;
    padding: 20px;
    margin: 2px;
    height: 400px
  }
  
  #column-2 {
    background-color: lightblue;
    width: 100%;
    border: 5px solid red;
    padding: 20px;
    margin: 2px;
    text-align: center;
    height: 400px
＆＃13; 
<!DOCTYPE html>
<html>

  <head>
    <title>Logans Dinner</title>
  </head>

  <body>
    <header>Welcome to Logans Dinner</header>
    <div id='column-1'>
      <nav>
        <ul>
          <li><a href='/Menu.html'>Menu</a></li>
          <li><a href='/About.html'>About Us</a></li>
          <li><a href='/Contact.html'>Contact Us</a></li>
        </ul>
      </nav>
  </header>
  </div>
  <div id='column-2'>
    <section>
      <p>Our Menu</p>
      <table>
        <thead>
          <tr>
            <th>Food</th>
            <th>Description</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Burger</td>
            <td>1/2 lb Angus Beef</td>
            <td>$10.99</td>
          </tr>
        </tbody>
      </table>
  </div>

  </section>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您可以使用规则margin: 0 auto来固定您的表格。这是简写​​：
margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;

此外，我注意到您有一些不匹配的HTML标记（例如早期的</body>和额外的</header>）。确保您的开始和结束标签在正确的位置正确配对。

＆＃13;
＆＃13; 
header {
  text-align: center;
  font-size: 30px;
  font-style: bold;
  font-style: italic;
}

#column-1 {
  float: left;
  background-color: lightblue;
  width: 25%;
  border: 5px solid red;
  padding: 20px;
  margin: 2px;
  height: 400px
}

#column-2 {
  background-color: lightblue;
  width: 100%;
  border: 5px solid red;
  padding: 20px;
  margin: 2px;
  text-align: center;
  height: 400px
}

table {
  margin: 0 auto;
}
＆＃13; 
<header>Welcome to Logans Dinner</header>
<div id='column-1'>
  <nav>
    <ul>
      <li><a href='/Menu.html'>Menu</a></li>
      <li><a href='/About.html'>About Us</a></li>
      <li><a href='/Contact.html'>Contact Us</a></li>
    </ul>
  </nav>
</div>
<div id='column-2'>
  <section>
    <p>Our Menu</p>
    <table>
      <thead>
        <tr>
          <th>Food</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Burger</td>
          <td>1/2 lb Angus Beef</td>
          <td>$10.99</td>
        </tr>
      </tbody>
    </table>
</div>

</section>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

＆＃13;
＆＃13; 
      header {
        text-align: center;
        font-size: 30px;
        font-style: bold;
        font-style: italic;
        height: 50px
      }

      #column-1 {
        float: left;
        background-color: lightblue;
        width: 25%;
        border: 5px solid red;
        padding: 20px;
        margin: 2px;
        height: 400px
      }

      #column-2 {
        background-color: lightblue;
        width: 100%;
        border: 5px solid red;
        padding: 20px;
        margin: 2px;
        text-align: center;
        height: 400px 
      }
      
      p {
        font-size: 150%;
        font-weight: bold;
      }

      table {
        margin: 0 auto;
      }

      table, th, td {
        border: 2px solid black;
        border-collapse: collapse;
      }
      td {
        padding: 15px;
      }

      /*This CSS class provide you striped rows on the table*/ 
      
      .table-striped thead tr:first-child th {
        background-color: #FF0000;
      }
      
      .table-striped tbody tr:nth-child(odd) td {
        background-color: #81DAF5;
      }

      .table-striped tbody tr:nth-child(even) td {
        background-color: #CEECF5;
      }
＆＃13; 
<!DOCTYPE html>
<html>
  <head>
    <title>Logans Dinner</title>
  </head>
  
  <body>
    <header>Welcome to Logans Dinner</header>
    <div id='column-1'>
      <nav>
        <ul>
          <li><a href='/Menu.html'>Menu</a></li>
          <li><a href='/About.html'>About Us</a></li>
          <li><a href='/Contact.html'>Contact Us</a></li>
        </ul>
      </nav>
    </div>
    <div id='column-2'>
      <section>
        <p>Our Menu</p>
        <table class="table-striped">
           <thead>
            <tr>
              <th>Food</th>
              <th>Description</th>
              <th>Price</th>
            </tr>
          </thead>
          
          <tbody>
            <tr>
              <td>Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$10.99</td>
            </tr>
            <tr>
              <td>Cheese Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$12.99</td>
            </tr>
            <tr>
              <td>Burger with fries</td>
              <td>1/2 lb Angus Beef</td>
              <td>$15.89</td>
            </tr>
            <tr>
              <td>Double Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$19.89</td>
            </tr>
            <tr>
              <td>Chicken Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$11.75</td>
            </tr>
            <tr>
              <td>Black Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$13.50</td>
            </tr>
           
          </tbody>
          
        </table>
        </div>
      </section>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

我将根据您提供的示例为您提供基于图像创建的代码。我希望这可以帮助你。我把CSS代码放在html文档中。如果您将它们放在单独的文件中，则可以剪切CSS代码并将其放入.css文件中。

<!DOCTYPE html>
<html>
  <head>
    <title>Logans Dinner</title>

    <style>

      /* The CSS code in order to format the table */
      header {
        text-align: center;
        font-size: 30px;
        font-style: bold;
        font-style: italic;
        height: 50px
      }

      #column-1 {
        float: left;
        background-color: lightblue;
        width: 25%;
        border: 5px solid red;
        padding: 20px;
        margin: 2px;
        height: 400px
      }

      #column-2 {
        background-color: lightblue;
        width: 100%;
        border: 5px solid red;
        padding: 20px;
        margin: 2px;
        text-align: center;
        height: 400px 
      }

      p {
        font-size: 150%;
        font-weight: bold;
      }

      table {
        margin: 0 auto;
      }

      table, th, td {
        border: 2px solid black;
        border-collapse: collapse;
      }
      td {
        padding: 15px;
      }

      /*This CSS class provide you striped rows on the table*/ 

      .table-striped thead tr:first-child th {
        background-color: #FF0000;
      }

      .table-striped tbody tr:nth-child(odd) td {
        background-color: #81DAF5;
      }

      .table-striped tbody tr:nth-child(even) td {
        background-color: #CEECF5;
      }

    </style>

  </head>

  <body>
    <header>Welcome to Logans Dinner</header>
    <div id='column-1'>
      <nav>
        <ul>
          <li><a href='/Menu.html'>Menu</a></li>
          <li><a href='/About.html'>About Us</a></li>
          <li><a href='/Contact.html'>Contact Us</a></li>
        </ul>
      </nav>
    </div>
    <div id='column-2'>
      <section>
        <p>Our Menu</p>
        <table class="table-striped">
           <thead>
            <tr>
              <th>Food</th>
              <th>Description</th>
              <th>Price</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$10.99</td>
            </tr>
            <tr>
              <td>Cheese Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$12.99</td>
            </tr>
            <tr>
              <td>Burger with fries</td>
              <td>1/2 lb Angus Beef</td>
              <td>$15.89</td>
            </tr>
            <tr>
              <td>Double Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$19.89</td>
            </tr>
            <tr>
              <td>Chicken Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$11.75</td>
            </tr>
            <tr>
              <td>Black Burger</td>
              <td>1/2 lb Angus Beef</td>
              <td>$13.50</td>
            </tr>

          </tbody>

        </table>
        </div>
      </section>
  </body>

</html>
相关问题
最新问题