Question

大家好，我有这个输入框，我想像在网格上一样将它们放在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>

Answer 1

您不需要具有最大宽度即可工作。这是一个可行的解决方案，尽管您不清楚要实现什么目标，所以请告诉我是否错过了什么。

您需要为网格系统提供一个容器，并且需要将要分组的输入框放入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端，您需要为容器指定一个显示网格，并告诉包含输入框的div应该放在哪一列中。

#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;
}

像这样，所有输入框都将很好地分组并排在一起。希望我有所帮助：）

Answer 2

根据上述CSS，第一列的固定宽度为200px，第二列将占用剩余可用空间的1fr（“一个分数”）。

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>

Answer 3

不确定我是否完全理解您的意思，但是您可以尝试flexbox。我将您的代码保持不变，但是在您的输入中添加了带有.input-group类的div包装器。

我还建议您使用标签作为输入内容，并将<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>

输入网格

3 个答案: