Question

我无法在所有输入空间上书写。当我创建线（不是一个盒子，因为我删除左右上边框）并填充填充时，我不能在整行上写，只有一半，然后前一个文本将消失左侧。

＆＃13;

.contato {
  background-color: white;
  width: 75%;
  height: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
}

.contato .header {
  background-color: #353E49;
  border-style: solid;
  border-color: lightgrey;
  border-bottom: none;
  border-width: 0.5px;
}

.contato h1 {
  margin-left: 10%;
  color: white;
  padding: 5% 0 5% 0;
  font-family: "lato regular";
  letter-spacing: 2px;
  font-size:
}

input,
textarea {
  display: block;
  background: transparent;
  border: none;
  border-bottom: 1px solid #CECFD3;
  padding: 1.5% 50% 2% 0;
  resize: vertical;
  width: auto;
  font-family: "Lato Regular";
  color: darkgray;
  font-size: 1.05 rem;
}

.preencher {
  border-style: solid;
  border-color: lightgrey;
  border-width: 0.5px;
  border-top: none;
  padding-top: 5%;
  margin-top: -5%;
}

＆＃13;

<div class="contato">
  <form name="contato" method="POST" netlify>
    <div class="header">
      <h1>Contato</h1>
    </div>
    <div class="preencher">
      <p>
        <label>Nome: <input type="text" name="nome"></label>
      </p>
      <p>
        <label>E-mail: <input type="email" name="email"></label>
      </p>
      <p>
        <label>Empresa/site: <input cols="60" type="email" name="empresa"></label>
      </p>
      <p>
        <label>Mensagem: <textarea name="mensagem"></textarea></label>
      </p>
      <p>
        <button type="submit">Send</button>
      </p>
    </div>
  </form>
</div>

＆＃13;

你可以在jsfiddle上看到结果并更好地理解我说的话：https://jsfiddle.net/cLsgL3d1/

有什么想法吗？

Answer 1

您的输入Priv设置为50％，宽度设置为自动，这会导致padding为50％，width填充其余空间。将左/右填充更改为零（或其他），并将宽度设置为100％而不是自动。

＆＃13;

margin

＆＃13;

.contato {
    background-color:white;
    width:75%;
    height:80%;
    margin-left:auto;
    margin-right:auto;
    margin-top:10%;
}

.contato .header {
    background-color: #353E49;
    border-style:solid;
    border-color:lightgrey;
    border-bottom:none;
    border-width: 0.5px;
}

.contato h1 {
    margin-left:10%;
    color:white;
    padding:5% 0 5% 0;
    font-family:"lato regular";
    letter-spacing: 2px;
    font-size:    
}

input,textarea {
    display:block;
    background: transparent;
    border: none;
    border-bottom: 1px solid #CECFD3;
    padding: 1.5% 0 2% 0;
    resize:vertical;
    width:100%;
    font-family:"Lato Regular";
    color:darkgray;
    font-size:1.05 rem;
}

.preencher {
    border-style: solid;
    border-color:lightgrey;
    border-width: 0.5px;
    border-top:none;
    padding-top:5%;
    margin-top:-5%;
}

＆＃13;

Answer 2

您需要将此CSS添加/替换为现有代码：

input { width: 100%; padding: 1.5% 5% 2% 0; box-sizing: border-box; }

你的50％右边填充是导致输入允许这么少量文本的原因。如果您希望输入在容器的右边缘之前停止，我建议将填充权限添加到父

标记。

Answer 3

我刚刚修改了这段代码，现在工作正常：

input,textarea {
        display:block;
        background: transparent;
        border: none;
        border-bottom: 1px solid #CECFD3;
        padding: 1.5% 0 2% 0; // you have added 50% of right padding. which is the reason of the problem. 
        resize:vertical;
        width:100%;
        font-family:"Lato Regular";
        color:darkgray;
        font-size:1.05 rem;
    }

我无法在HTML

3 个答案: