Question

我已经编写了一个小表格，它是一个较大的网页的一部分，根据规范，我正在采取一些小步骤。

我很好奇我是否可以做得更好。如果我可以简化代码或使用其他更好的命令或语法？

也许有一些冗余？

还有一种很好的方法可以移动“发送”按钮，使其位于中间居中，并且有一种方法可以将其关闭至底部而不会造成太多麻烦？还是将占位符文本移到左侧？

我将附上笔的链接，您可以在此处签出代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title></title>
</head>

<body>
  <form action="#">

    <h2>xyz xyz</h2>
    <div class="input-wrapper">
      <label for="name">Name:</label>
      <input type="text" name="Name" placeholder="Name...." id="name">
    </div>

    <div class="input-wrapper">
      <label for="email">Epost:</label>
      <input type="text" name="Epost" placeholder="Epost...." id="epost">
    </div>

    <button type="submit">Senden</button>
  </form>
</body>

</html>

Answer 1

我通过添加margin属性来调整按钮的位置并注释transform属性来更改您的代码。但是，如果您可以使用引导程序或材质设计之类的样式库，则可以更快地整理表单

h2 {
    margin: 0;
    padding: 0;
	margin-bottom: 2.3rem;
}

form {
  float: left;
  display: inline-block;
  padding: .5rem;
  height: 205px;
  width: 168px;
  border: 2px solid black;
  font-family: Sans-Serif;
  font-size: 12px;
}

.input-wrapper {
  margin-bottom: .5rem;
}

label {
  width: 50px;
  display: inline-block;
  text-align: left;
 font-family: Sans-Serif;
font-size: 14px;
}

input {
  width: 90px;
  padding: .5rem;
  height: 3px;
  border: 2px solid black;
  text-align: left;
}

button {						
  padding: .5rem;
  display: block;
  width: 55%;	
  background: lightgrey;
  color: black;
  border: 2px solid black;
  text-align: center;
  border-radius: 5px;
  font-size: inherit;
  /* transform: translate(50%, 50%); */
  margin: 60px auto;
  
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title></title>
</head>

<body>
  <form action="#">

    <h2>xyz xyz</h2>
    <div class="input-wrapper">
      <label for="name">Name:</label>
      <input type="text" name="Name" placeholder="Name...." id="name">
    </div>

    <div class="input-wrapper">
      <label for="email">Epost:</label>
      <input type="text" name="Epost" placeholder="Epost...." id="epost">
    </div>

    <button type="submit">Senden</button>
  </form>
</body>

</html>

代码查看简易框和表单代码html5 css3

1 个答案: