Как мне указать, где я хочу, чтобы интервал в W3.CSS висел над выпадающим меню? - PullRequest
0 голосов
/ 24 июня 2018

Прежде всего, я знаю, что этот вопрос, вероятно, задавался миллион раз. При этом я впервые положил руку на банку с печеньем HTML / CSS, и я чувствую себя полным идиотом за то, что не смог разобраться со всеми имеющимися ресурсами. Вот что я придумала от бога знает сколько сайтов:

<div class="w3-dropdown-hover">
        <button class="w3-button w3-hide-small"><i class="fa fa-user"></i> REGISTER</button>
        <div class="w3-dropdown-content w3-bar-block w3-border">
        <form autocomplete="off">
                <div class="form-group">
                    <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
                </div>
                <div class="form-group">
                    <input type="email" name="email" id="email" tabindex="2" class="form-control" placeholder="Email Address" value="">
                </div>
                <div class="form-group">
                    <input type="password" name="password" id="password" tabindex="3" class="form-control" placeholder="Password">
                </div>
                <div class="form-group">
                    <input type="password" name="confirm-password" id="confirm-password" tabindex="4" class="form-control" placeholder="Confirm Password">
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-6 col-xs-offset-3">
                            <input type="submit" name="register-submit" id="register-submit" tabindex="5" class="form-control btn btn-info" value="Register Now">
                        </div>
                    </div>
                </div>
                <input type="hidden" class="hide" name="token" id="token" value="7c6f19960d63f53fcd05c3e0cbc434c0">
            </form>
        </div>
    </div>

Когда я его запускаю, это выглядит так:

enter image description here

Я хотел бы иметь некоторый буфер вокруг него, как будто я вижу все примеры кодов. Однако по какой-то причине, когда я пытаюсь добавить class = "px-4 py-4" к определению области формы, ничего не происходит. Я уверен, что я делаю что-то глупое и буду признателен за любую помощь в этом. Если мне не хватает какой-либо важной информации, пожалуйста, дайте мне знать, и я буду рад добавить ее. Спасибо.

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

"w3-padding" делает то, что вам нужно. Вы можете добавить класс "w3-border" вокруг входов и кнопку "Зарегистрироваться сейчас". Кстати, я предлагаю вам использовать одну из библиотек css, либо bootstrap, либо w3.css. В противном случае это становится слишком сложным и может мешать друг другу. Вы можете потерять время, пытаясь понять, почему ваш код работает странно.

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
  <div class="w3-light-grey">
    <div class="w3-dropdown-hover">
      <button class="w3-button">Register</button>
      <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-padding">
        <input type="text" placeholder="Username" class="w3-input"/>
        <input type="email" placeholder="Email Address" class="w3-input"/>
        <input type="password" placeholder="Password" class="w3-input"/>
        <input type="password" placeholder="Confirm Password" class="w3-input"/>
        <button  class="w3-button">Register Now</button>
      </div>
  </div>
</div>
 </body>
</html>
0 голосов
/ 24 июня 2018

На справочной странице W3.CSS я не нашел никаких ссылок о px-4 или py-4 классе: https://www.w3schools.com/w3css/w3css_references.asp#padding

Я думаю, что вы хотели использовать класс w3-padding-small (или любой аналогичный класс заполнения, присутствующий на странице ссылок W3.CSS) в том же элементе, что и класс w3-dropdown-content.

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-dropdown-hover">
  <button class="w3-button w3-hide-small"><i class="fa fa-user"></i> REGISTER</button>
  <div class="w3-dropdown-content w3-bar-block w3-border w3-padding-small">
    <form autocomplete="off">
      <div class="form-group">
        <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
      </div>
      <div class="form-group">
        <input type="email" name="email" id="email" tabindex="2" class="form-control" placeholder="Email Address" value="">
      </div>
      <div class="form-group">
        <input type="password" name="password" id="password" tabindex="3" class="form-control" placeholder="Password">
      </div>
      <div class="form-group">
        <input type="password" name="confirm-password" id="confirm-password" tabindex="4" class="form-control" placeholder="Confirm Password">
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-xs-6 col-xs-offset-3">
            <input type="submit" name="register-submit" id="register-submit" tabindex="5" class="form-control btn btn-info" value="Register Now">
          </div>
        </div>
      </div>
      <input type="hidden" class="hide" name="token" id="token" value="7c6f19960d63f53fcd05c3e0cbc434c0">
    </form>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...