Ввод в сетку - PullRequest
Новая
       19

Ввод в сетку

0 голосов
/ 21 сентября 2018

Привет, ребята, у меня есть все эти поля ввода, и я хочу поместить их как 3x4 или 4x3 как в сетку (я не хочу, чтобы они оставались один под другими), я пытался использовать сетку илидругой код, но просто это не работает.Ты знаешь как это решить?это всплывающее окно для расширения Chrome, поэтому у меня нет максимальной ширины, может быть, поэтому. 

html {
  background-color: #d63031
}

input {
  border: white solid;
  background: #;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  color: #574026;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
}
<html>

<head>

  <script src="script.js"></script>
</head>

<body style="width:600px">
  <p>Text</p>
  <p style="font-size:smaller"><em>Text</em></p>
  <p>Nome: <input placeholder="Name and Surname" id="nome"></p>
  <p>mail: <input placeholder="Email" id="mail"></p>
  <p>tel: <input placeholder="Telephone" id="tel"></p>
  <p>addr: <input placeholder="Address" id="indirizzo"></p>
  <p>City: <input placeholder="City" id="citta"></p>
  <p>PostCod: <input placeholder="PosteCode" id="pc"></p>

  <p>CardNumber: <input placeholder="Card Number" id="provola"></p>
  <p>CountryCode <input placeholder="IT,UK,...." id="paese"></p>
  <p>Card Type <input placeholder="american_express, master, visa, solo, paypal" id="tipo"></p>
  <p>ExpirationMonth: <input placeholder="01,02,03,04,05,06,07,08,09,10,11,12" id="mese"></p>
  <p>ExpirationYear: <input placeholder="2018,2019..." id="anno"></p>
  <p>Cvv: <input id="cvv"></p>



  <p><input style="background-color:#6c5ce7;border:none;" type="submit" id="send"></p>
</body>

</html>

Ответы [ 3 ]

0 голосов
/ 21 сентября 2018

Не уверен, что я точно понимаю, что вы говорите, но вы можете попробовать flexbox .Я сохранил ваш код на том же уровне, но добавил к вашим входам div-обертку с классом * 1003. *

Я также рекомендую использовать метки для ваших входов и изменить <p> на <div>

html {
  background-color: #d63031
}

body{
  width: 600px;
}

.input-group{
  display: flex;
  display: -webkit-box; 
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex; 
}

.input-group p{
  width: 33.3%;
  padding: 0 10px;
}

.input-group input{
  width: 100%;
}

input {
  display: block;
  border: white solid;
  background: #;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  color: #574026;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
}

  <p>Text</p>
  <p style="font-size:smaller"><em>Text</em></p>
  <div class="input-group">
    <p>Nome: <input placeholder="Name and Surname" id="nome"></p>
    <p>mail: <input placeholder="Email" id="mail"></p>
    <p>tel: <input placeholder="Telephone" id="tel"></p>
  </div>
  <div class="input-group">
    <p>addr: <input placeholder="Address" id="indirizzo"></p>
    <p>City: <input placeholder="City" id="citta"></p>
    <p>PostCod: <input placeholder="PosteCode" id="pc"></p>
  </div>
  <div class="input-group">
    <p>CardNumber: <input placeholder="Card Number" id="provola"></p>
    <p>CountryCode <input placeholder="IT,UK,...." id="paese"></p>
    <p>Card Type <input placeholder="american_express, master, visa, solo, paypal" id="tipo"></p>
  </div>
  <div class="input-group">
    <p>ExpirationMonth: <input placeholder="01,02,03,04,05,06,07,08,09,10,11,12" id="mese"></p>
    <p>ExpirationYear: <input placeholder="2018,2019..." id="anno"></p>
    <p>Cvv: <input id="cvv"></p>
  </div>



  <p><input style="background-color:#6c5ce7;border:none;" type="submit" id="send"></p>
0 голосов
/ 21 сентября 2018

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

Вам нужен контейнер для вашей системы сетки, и вам нужно поставитьполя ввода, которые вы хотите сгруппировать в элемент div, например: 

<div id="grid">
    <div id="grid-1">
        <p>Nome: <input placeholder="Name and Surname" id="nome"></p>
        <p>mail: <input placeholder="Email" id="mail"></p>
        <p>tel: <input placeholder="Telephone" id="tel"></p>
    </div>
    <div id="grid-2">
        <p>addr: <input placeholder="Address" id="indirizzo"></p>
        <p>City: <input placeholder="City" id="citta"></p>
        <p>PostCod: <input placeholder="PosteCode" id="pc"></p>
    </div>
    <div id="grid-3">
        <p>CardNumber: <input placeholder="Card Number" id="provola"></p>
        <p>CountryCode <input placeholder="IT,UK,...." id="paese"></p>
        <p>Card Type <input placeholder="american_express, master, visa, solo, paypal" id="tipo"></p>
    </div>
    <div id="grid-4">
        <p>ExpirationMonth: <input placeholder="01,02,03,04,05,06,07,08,09,10,11,12" id="mese"></p>
        <p>ExpirationYear: <input placeholder="2018,2019..." id="anno"></p>
        <p>Cvv: <input id="cvv"></p>
    </div>
</div>

На стороне CSS необходимо указать сетку отображения для контейнера и сообщить элементам, содержащим поля ввода, вв какой столбец они должны идти. 

#grid {
    display: grid;
    grid-gap: 20px;
}

#grid-1 {
    grid-column: 1/2;
}

#grid-2 {
    grid-column: 2/3;
}

#grid-3 {
    grid-column: 3/4;
}

#grid-4 {
    grid-column: 4/5;
}

Таким образом, все ваши поля ввода будут сгруппированы и выстроены рядом друг с другом.Надеюсь, я помог:)

0 голосов
/ 21 сентября 2018

Исходя из вышеуказанного CSS, первый столбец будет иметь фиксированную ширину 200 пикселей, а второй займет 1 кадр («одну дробь») от оставшегося доступного пространства. 

html {
  background-color: #d63031
}
body{display: grid;
grid-template-columns: 200px 1fr;}

input {
  border: white solid;
  background: #;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  color: #574026;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
}
<html>

<head>

  <script src="script.js"></script>
</head>

<body style="width:600px">
  <p>Text</p>
  <p style="font-size:smaller"><em>Text</em></p>
  <p>Nome: <input placeholder="Name and Surname" id="nome"></p>
  <p>mail: <input placeholder="Email" id="mail"></p>
  <p>tel: <input placeholder="Telephone" id="tel"></p>
  <p>addr: <input placeholder="Address" id="indirizzo"></p>
  <p>City: <input placeholder="City" id="citta"></p>
  <p>PostCod: <input placeholder="PosteCode" id="pc"></p>

  <p>CardNumber: <input placeholder="Card Number" id="provola"></p>
  <p>CountryCode <input placeholder="IT,UK,...." id="paese"></p>
  <p>Card Type <input placeholder="american_express, master, visa, solo, paypal" id="tipo"></p>
  <p>ExpirationMonth: <input placeholder="01,02,03,04,05,06,07,08,09,10,11,12" id="mese"></p>
  <p>ExpirationYear: <input placeholder="2018,2019..." id="anno"></p>
  <p>Cvv: <input id="cvv"></p>



  <p><input style="background-color:#6c5ce7;border:none;" type="submit" id="send"></p>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...