Question

我使用的是纯框架，它似乎没有提供整个页面居中的机制。我找到了以下代码段：

#container {
  width:100%;
  max-width:750px;
  margin: 0 auto;
}

在桌面上一切正常：但在移动设备上它看起来很奇怪：问题在哪里，我该如何解决？这是如何不渲染页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Keyring</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='images/key.png') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/pure.css') }}">
    <link rel="stylesheet" type='text/css' href="{{ url_for('static', filename='css/keyring.css') }}">
  </head>
  <body>
    <div id="container">
      <header>
        <h1>Keyring</h1>
      </header>
      <main>
        <section id="generate">
          <form class="pure-form pure-form-stacked" method="POST" action="{{ url_for('keyring') }}">
            {% if errors %}
              <ul class="errors">
                {% for error in errors %}
                  <li>! <strong>{{ error }}</strong> !<li>
                {% endfor %}
              </ul>
            {% endif %}
            <label for="service">Service</label>
            <input name="service" type="text">
            <label for="key">Master key</label>
            <input name="key" type="password">
            <label for="length">Length</label>
            <input name="length" type="number" value="10">
            <label for="lower" class="pure-checkbox">
              <input type="checkbox" name="lower" checked>
              Lower case letters
            </label>
            <label for="upper" class="pure-checkbox">
              <input type="checkbox" name="upper" checked>
              Upper case letters
            </label>
            <label for="digits" class="pure-checkbox">
              <input type="checkbox" name="digits" checked>
              Digits
            </label>
            <label for="symbols" class="pure-checkbox">
              <input type="checkbox" name="symbols">
              Symbols
            </label>
            <input class="pure-button pure-button-primary" type="submit" value="Generate password">
          </form>
        </section>
        {% if password and service %}
          <section id="result">The password for the service {{ service }} is <span class="password">{{ password }}</span>.</section>
        {% endif %}
      </main>
    </div>
  </body>
</html>

如何以纯粹的方式集中网站响应

0 个答案: