html - 显示 block 没有将我的标签元素对齐在我的输入元素之上？

标签 html css flexbox

我希望我的 label 元素直接在 input 元素的上方和左侧对齐。因此，与标准表单一样，label 将位于 input 元素的左上角。我尝试过在标签和输入元素上使用 display: block，我尝试过使用对齐内容/元素和使用 Flexbox。到目前为止还没有任何效果。

这是我的 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/main.css"></link>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div id="notification"> 
    <btn id="close"> Close </btn>
  </div>

  <h3>Movie Reviews</h3>
   
  <div id="error-div"></div>

  <form class="create-movie-form" action="submit">
    <label for="title">Movie Title:</label>
    <input type="text" name="title" id="title" placeholder="Movie Title" />
    <label for="runtime">Movie Runtime:</label>
    <input type="text" name="runtime" id="runtime" placeholder="Runtime" />
    <label for="rating">Movie Rating:</label>
    <input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
    <label for="review">Movie Review:</label>
    <input type="text" name="review" id="review" placeholder="Write a review for this movie" />
    <button type="submit" id="create-btn">Create movie</button>
  </form>

  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="functions.js"></script>
  <script src="main.js"></script>
</body>
</html>

这是我的CSS

html, body {
  font-family: 'Nunito', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: linear-gradient(90deg, rgb(0, 104, 241), rgb(48, 52, 255));
}

/* ANCHORS */

.anchor-div {
  display: flex;
  justify-content: center;
  margin-top: 4%;
}

.anchor-btn {
  display: block;
  width: 40%;
  height: 10%;
  background:#fff;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  color: rgb(0, 119, 255);
  font-weight: bold;
  line-height: 25px;
  text-decoration: none;
}

a:hover {
  color: rgb(15, 15, 15);
}

/* MOVIE INPUTS AND FORMS */

.create-movie-form {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  margin: auto;
  font-family: 'Nunito', sans-serif;
  background-color: #fff;
  padding-bottom: 5%;
  padding-top: 3%;
  max-width: 95%;
}

label {
  display: block;
  width: 100%;
  margin-top: 6%;
  margin-left: 10%;
  font-size: 12px;
}

input {
  font-family: 'Nunito', sans-serif;
  border-radius: 3px;
  border: 1px rgb(216, 215, 215) solid;
  margin: 0 auto auto auto;
  padding: 2.5% 1.5%;
  width: 70%;
}

input:focus {
  border: 2px solid rgb(0, 0, 255);
}

/* BUTTONS */

button {
  font-family: 'Nunito', sans-serif;
  width: 43%;
  padding: 6px;
  border-radius: 5px;
  font-weight: bolder;
  font-size: 15px;
  background: rgb(0, 119, 255) ;
  border: solid 1px #fff;
  margin: 5% auto auto auto;
  color: #fff;
  letter-spacing: 1px;
}

/* MOVIE LIST */

#movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  column-gap: 1fr;
  row-gap: 1fr;
}

section {
  border: 2px #fff solid;
  border-radius: 5px;
  background: #fff;
  color: rgb(0, 119, 255);
  margin: 2%;
  padding: 2%;
  animation: 
    sectionSlideDown .5s ease-out,
    fadeIn .5s ease-in;
}

.id {
  margin-left: 2%;
}

感谢您的帮助!

最佳答案

1.) 将 label 上的 margin-left 设置为 15%(即 100% 全宽减去 70% 宽度的剩余部分的一半) 输入元素)。

2.) 将 box-sizing: border-box 添加到“输入”，以便在 70% 宽度计算中包含左右内边距和边框:

html, body {
  font-family: 'Nunito', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: linear-gradient(90deg, rgb(0, 104, 241), rgb(48, 52, 255));
}

/* ANCHORS */

.anchor-div {
  display: flex;
  justify-content: center;
  margin-top: 4%;
}

.anchor-btn {
  display: block;
  width: 40%;
  height: 10%;
  background:#fff;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  color: rgb(0, 119, 255);
  font-weight: bold;
  line-height: 25px;
  text-decoration: none;
}

a:hover {
  color: rgb(15, 15, 15);
}

/* MOVIE INPUTS AND FORMS */

.create-movie-form {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  margin: auto;
  font-family: 'Nunito', sans-serif;
  background-color: #fff;
  padding-bottom: 5%;
  padding-top: 3%;
  max-width: 95%;
}

label {
  display: block;
  width: 100%;
  margin-top: 6%;
  margin-left: 15%;
  font-size: 12px;
}

input {
  font-family: 'Nunito', sans-serif;
  border-radius: 3px;
  border: 1px rgb(216, 215, 215) solid;
  margin: 0 auto auto auto;
  padding: 2.5% 1.5%;
  width: 70%;
  box-sizing: border-box;
}

input:focus {
  border: 2px solid rgb(0, 0, 255);
}

/* BUTTONS */

button {
  font-family: 'Nunito', sans-serif;
  width: 43%;
  padding: 6px;
  border-radius: 5px;
  font-weight: bolder;
  font-size: 15px;
  background: rgb(0, 119, 255) ;
  border: solid 1px #fff;
  margin: 5% auto auto auto;
  color: #fff;
  letter-spacing: 1px;
}

/* MOVIE LIST */

#movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  column-gap: 1fr;
  row-gap: 1fr;
}

section {
  border: 2px #fff solid;
  border-radius: 5px;
  background: #fff;
  color: rgb(0, 119, 255);
  margin: 2%;
  padding: 2%;
  animation: 
    sectionSlideDown .5s ease-out,
    fadeIn .5s ease-in;
}

.id {
  margin-left: 2%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div id="notification"> 
    <btn id="close"> Close </btn>
  </div>

  <h3>Movie Reviews</h3>
   
  <div id="error-div"></div>

  <form class="create-movie-form" action="submit">
    <label for="title">Movie Title:</label>
    <input type="text" name="title" id="title" placeholder="Movie Title" />
    <label for="runtime">Movie Runtime:</label>
    <input type="text" name="runtime" id="runtime" placeholder="Runtime" />
    <label for="rating">Movie Rating:</label>
    <input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
    <label for="review">Movie Review:</label>
    <input type="text" name="review" id="review" placeholder="Write a review for this movie" />
    <button type="submit" id="create-btn">Create movie</button>
  </form>

  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="functions.js"></script>
  <script src="main.js"></script>
</body>
</html>

关于html - 显示 block 没有将我的标签元素对齐在我的输入元素之上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62565828/

上一篇：javascript - 为什么 Node.js htmlparser2 在解析文档时插入额外的 Node ？

下一篇：Git - 重置原点/主站

相关文章：

css - 如何在不溢出、不滚动、不进行媒体查询的情况下自动调整固定容器内图像数组的大小？

html - 为 html/css/js 编程/编辑时改进工作流程

html - 如何将我的元素符号图像与我的 <li> 内容对齐？

javascript - 使用 JQuery 预加载图像以获得图像的主色

html - 下载的字体不显示特殊字符

javascript - 使用 JQuery 切换 div 可见性

javascript - flexbox 的 flex-wrap 属性

html - 如何创建此 HTML 表格，其行 tds 跨越多列

html - 如何使用 CSS 创建自定义形状？

html - 如何防止 IE11 中的 flex 元素缩小到小于其内容？

©2024 IT工具网  联系我们