时间戳

首页 > 解决方案 > 在 section,article 和 nav 中，我希望该部分位于页面中间

html - 在 section,article 和 nav 中，我希望该部分位于页面中间

问题描述

我的页面有部分、导航、文章。该部分包含导航和文章。截至目前，导航和文章占据了整页。但我需要的是文章和导航应该在页面的中心。我指的是https://www.w3schools.com/html/html_layout.asp并开发了网页。我的 html 代码看起来像这样

<header class="header header-default header">
    <div class="container-fluid">
        <div class="header-header">
            <a class="header-brand" href="#">
                <img></img></a>
            </a>
            <h1>My application</h1>
        </div>
    </div>
</header>
<section>
    <nav>
        <label for='Date'>Choose the booking date:</label>

        <input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
        <input class="btn btn-success" type='button' id='submit' value='Submit'>
    </nav>
    <article>
        <div>
            <p></p>
        </div>
    </article>

</section>

我的CSS看起来像这样

 /* Create two columns/boxes that floats next to each other */
      nav {
        float: left;
        width: 30%;
        height: 300px; /* only for demonstration, should be removed */
        background: #ccc;
        padding: 20px;
      }



      article {
        float: left;
        padding: 20px;
        width: 70%;
        background-color: #f1f1f1;
        height: 300px; /* only for demonstration, should be removed */
      }

      /* Clear floats after the columns */
      section:after {
        content: "";
        display: table;
        clear: both;
      }



      /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
      @media (max-width: 600px) {
        nav, article {
          width: 100%;
          height: auto;
        }
      }

通过引用此CSS 获取文章中心已包含 margin-left: auto; 边距右：自动；在“部分”中

 section:after {
        content: "";
        display: table;
        clear: both;
margin-left: auto; 
margin-right: auto;

它没有给我想要的预期输出。预期的输出是：导航和文章应该在页面的中间。

<html>

<head>


    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style>
         /* Create two columns/boxes that floats next to each other */
      nav {
        float: left;
        width: 30%;
        height: 300px; /* only for demonstration, should be removed */
        background: #ccc;
        padding: 20px;
      }



      article {
        float: left;
        padding: 20px;
        width: 70%;
        background-color: #f1f1f1;
        height: 300px; /* only for demonstration, should be removed */
      }

      /* Clear floats after the columns */
      section:after {
        content: "";
        display: table;
        clear: both;
      }



      /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
      @media (max-width: 600px) {
        nav, article {
          width: 100%;
          height: auto;
        }
      }

    </style>

</head>
<body>
<header class="header header-default header">
    <div class="container-fluid">
        <div class="header-header">
            <a class="header-brand" href="#">
                <img></img></a>
            </a>
            <h1>My application</h1>
        </div>
    </div>
</header>
<section>
    <nav>
        <label for='Date'>Choose the booking date:</label>

        <input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
        <input class="btn btn-success" type='button' id='submit' value='Submit'>
    </nav>
    <article>
        <div>
            <p></p>
        </div>
    </article>

</section>

</body>
</html>

What I need is the choose the booking date(nav) and the article should be in middle leaving the space in the left and right. As of now, you can see it's the full width of the page

标签： htmlcss

解决方案

你做对了，只是一个错误 - 你没有在你的宽度中考虑填充。请试试。

 /* Create two columns/boxes that floats next to each other */
      nav {
        float: left;
        width: calc(30% - 40px);
        height: 300px; /* only for demonstration, should be removed */
        background: #ccc;
        padding: 20px;
      }



      article {
        float: left;
        padding: 20px;
        width: calc(70% - 40px);
        background-color: #f1f1f1;
        height: 300px; /* only for demonstration, should be removed */
      }

      /* Clear floats after the columns */
      section:after {
        content: "";
        display: table;
        clear: both;
      }



      /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
      @media (max-width: 600px) {
        nav, article {
          width: 100%;
          height: auto;
        }
      }
<header class="header header-default header">
    <div class="container-fluid">
        <div class="header-header">
            <a class="header-brand" href="#">
                <img></img></a>
            </a>
            <h1>My application</h1>
        </div>
    </div>
</header>
<section>
    <nav>
        <label for='Date'>Choose the booking date:</label>

        <input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
        <input class="btn btn-success" type='button' id='submit' value='Submit'>
    </nav>
    <article>
        <div>
            <p></p>
        </div>
    </article>

</section>

推荐阅读