Question

我一直在尝试将输入和textarea放在屏幕的右侧，并将标签放在左侧。尝试创建结构化表格。目前，我尝试使用float和position，但是它们似乎冲突并给出了难看的结果。有一个更好的方法吗？在此先感谢：）

编辑：我不能为此项目使用div

form {
    border: 2px solid dimgrey;
    display: inline-block;
    box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.60);;
}

input, textarea {
    display: block;
    box-sizing: border-box;
    float: right;
}

label {
    float: left;
    display: inline-block;
}

<form>
    <label for="naam">Je naam:</label>
    <input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
    <label for="email">Je e-mailadress:</label>
    <input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte@gmail.com">
    <label>Type vraag:
    <select name="Type Vraag">
        <option value="Business">Business</option>
        <option value="ProductVraag">Vraag over een product</option>
        <option value="Andere">Andere</option>
    </select>
    </label>
    <label for="Vraag">Je vraag:
    <textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
    </label>
    <input type="submit" value="Verzend">
</form>

Answer 1

它将为您工作。

.form-group{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

<form>
  <div class="form-group">
    <label for="naam">Je naam:</label>
    <input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
    </div>
    <div class="form-group">
    <label for="email">Je e-mailadress:</label>
    <input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte@gmail.com">
    </div>
    <div class="form-group">
    <label>Type vraag:</label>
    <select name="Type Vraag">
        <option value="Business">Business</option>
        <option value="ProductVraag">Vraag over een product</option>
        <option value="Andere">Andere</option>
    </select>    
    </div>
    <div class="form-group">
    <label for="Vraag">Je vraag:</label>
    <textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
    
    </div>
    <input type="submit" value="Verzend">
</form>

Answer 2

perldoc -f send

Answer 3

尝试一下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>

<style>

  form {
      border: 2px solid dimgrey;

      box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.60);
      display: flex;
      flex-wrap: wrap;
  }

  input, textarea,select {
      margin-top: 10px;
      width: 70%;
      border: 1px solid #eee;
      padding: 0 10px
  }

  label {
      margin-top: 10px;
      width: 30%;
      flex-grow: 0;
      flex-shrink: 0;
  }

  input[type=submit] {
    margin-left: 30%;
    max-width: 150px;
}

</style>
</head>
<body>

  <form>
      <label for="naam">Je naam:</label>
      <input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
      <label for="email">Je e-mailadress:</label>
      <input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte@gmail.com">
      <label>Type vraag:</label>
      <select name="Type Vraag">
          <option value="Business">Business</option>
          <option value="ProductVraag">Vraag over een product</option>
          <option value="Andere">Andere</option>
      </select>
      <label for="Vraag">Je vraag:</label>
      <textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
      <input type="submit" value="Verzend">
  </form>
</body>
</html>

Answer 4

您应将输入内容和textarea标签移到label标签之外，并将宽度设置为50％，并增加一些边距。

form {
    border: 2px solid dimgrey;
    display: inline-block;
    box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.60);;
}

input, textarea, select {
    display: block;
    box-sizing: border-box;
    float: right;
    width: 50%;
    margin: 10px;
}

label {
    float: left;
    display: inline-block;
    width:50%;
}

<form>
    <label for="naam">Je naam:</label>
    <input type="text" id="naam" name="naam" size="25" maxlength="35" placeholder="Elon Musk">
    <label for="email">Je e-mailadress:</label>
    <input type="text" id="email" name="email" size="25" maxlength="25" placeholder="JosDePutte@gmail.com">
    <label>Type vraag:
    </label>
     <select name="Type Vraag">
        <option value="Business">Business</option>
        <option value="ProductVraag">Vraag over een product</option>
        <option value="Andere">Andere</option>
    </select>
    <label for="Vraag">Je vraag:
   
    </label>
     <textarea id="Vraag" name="Vraag" maxlength="250"></textarea>
    <input type="submit" value="Verzend">
</form>

将输入/文本区域放在右侧

4 个答案: