Материал Design Web 1.0, сетка внутри карточки висит слева - PullRequest
Новая
       33

Материал Design Web 1.0, сетка внутри карточки висит слева

1 голос
/ 03 мая 2019

Я экспериментирую с Material Design Web 1.0, имеющим следующий код: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; script-src 'unsafe-inline' https://unpkg.com; style-src 'unsafe-inline' https://unpkg.com https://fonts.googleapis.com"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>

    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
    <style>
      .my-card-content 
       {
        padding: 16px;
       }
    </style>
  </head>
  <body>
    <div class="mdc-card my-card-content">

      <div class="mdc-layout-grid">
        <div class="mdc-layout-grid__inner">
          <div class="mdc-layout-grid__cell"><label class="mdc-floating-label" for="username">Username</label></div>
          <div class="mdc-layout-grid__cell">
            <div class="mdc-text-field">
              <input type="text" id="username" class="mdc-text-field__input" required  tabindex="0">
              <div class="mdc-line-ripple"></div>
            </div>
          </div>
        </div>
        <div class="mdc-layout-grid__inner">
          <div class="mdc-layout-grid__cell"><label class="mdc-floating-label" for="password">Password</label></div>
          <div class="mdc-layout-grid__cell">
            <div class="mdc-text-field">
              <input type="password" id="password" class="mdc-text-field__input" required  minlength="8"  tabindex="0">
              <div class="mdc-line-ripple"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Что я действительно хотел, так это чтобы метки имени пользователя / пароля были центрированы внутри карточки, но на данный момент это выглядит так:

enter image description here

Мне кажется странным, что метки имени пользователя / пароля висят слева от карты ...

Как изменить макет, чтобы он был таким, как я ожидал? Есть ли способ сделать это без разметки сетки?

Ответы [ 2 ]

1 голос
/ 06 июня 2019

Через месяц я удалил mdc-layout-grid и изменил все это: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; script-src 'unsafe-inline' https://unpkg.com; style-src 'unsafe-inline' https://unpkg.com https://fonts.googleapis.com"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
    <style>
      .my-card-content 
       {
        padding: 16px;
       }
    </style>
  </head>
  <body>
    <div class="mdc-card my-card-content">
      <div class="mdc-card__primary-action" tabindex="0">
        <div class="">
          <div>
            <div class="mdc-text-field">
              <label class="mdc-floating-label" for="username">Username</label>
              <input type="text" id="username" class="mdc-text-field__input" required tabindex="0" autocorrect="off" autocomplete="off" spellcheck="false">
            </div>
          </div>
          <br/>
          <div>
            <div class="mdc-text-field">
              <label class="mdc-floating-label" for="password">Password</label>
              <input type="password" id="password" class="mdc-text-field__input" required minlength="8" tabindex="0" aria-controls="password-helper-text" aria-describedby="password-helper-text">
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Что выглядит лучше:

Layout result from browser

1 голос
/ 03 мая 2019

Вы можете попытаться удалить (на элементе ярлыка):

класс = "MDC-плавающей метка" 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; script-src 'unsafe-inline' https://unpkg.com; style-src 'unsafe-inline' https://unpkg.com https://fonts.googleapis.com"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>

    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
    <style>
      .my-card-content 
       {
        padding: 16px;
       }
    </style>
  </head>
  <body>
    <div class="mdc-card my-card-content">

      <div class="mdc-layout-grid">
        <div class="mdc-layout-grid__inner">
          <div class="mdc-layout-grid__cell"><label for="username">Username</label></div>
          <div class="mdc-layout-grid__cell">
            <div class="mdc-text-field">
              <input type="text" id="username" class="mdc-text-field__input" required  tabindex="0">
              <div class="mdc-line-ripple"></div>
            </div>
          </div>
        </div>
        <div class="mdc-layout-grid__inner">
          <div class="mdc-layout-grid__cell"><label for="password">Password</label></div>
          <div class="mdc-layout-grid__cell">
            <div class="mdc-text-field">
              <input type="password" id="password" class="mdc-text-field__input" required  minlength="8"  tabindex="0">
              <div class="mdc-line-ripple"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...