html - 按钮位置不变

我开发了一个 python 后端，并试图为我的应用程序设计一个 html 和 javascript 前端。我是 HTML 新手。

代码如下

        html{
            font:normal 14px/1.5 Courier New;
        }
        h1{
            margin: 7rem;
            margin-top: 8rem;
        }
        form{
            margin: 3rem;
            width: 800px;
        }
        .form-IFS_DataLocation{
            font-size: 1rem;
            width: 100px;
            position: absolute;
            margin-left: 400px

         }
        .form-IFS_DataLocation button{
            font-size: 0.7rem;
            border: none;
            padding: 0.5rem 0.5rem;
            color: white;
            background-color: cornflowerblue;
            cursor: pointer;
        }
        .form-PDF_Location{
            font-size: 1rem;
            width: 200px;
            position: absolute;
            margin-top: 10px;
        }
        .form-PDF_Location button{
            font-size: 0.7rem;
            border: none;
            padding: 0.5rem 0.5rem;
            color: white;
            background-color: cornflowerblue;
            cursor: pointer;
        }
        .form-Output_Location{
            font-size: 1rem;
            width: 200px;
            position: absolute;
            margin-top: 10px;
        }
       .form-Output_Location button{
           font-size: 0.7rem;
           border: none;
           padding: 0.5rem 0.5rem;
           color: white;
           background-color: cornflowerblue;
           cursor: pointer;
       }
       .form-HighLight{
          font-size: 1rem;
          width: 200px;
          position: absolute;
          margin-top: 10px;

       }
      .form-Highlight button{
          font-size: 0.7rem;
          border: none;
          padding: 0.5rem 0.5rem;
          color: white;
          background-color: cornflowerblue;
          cursor: pointer;
      }

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Working with HTML Forms</title>
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <h1><center>Test<center></h1>

    <form id="form-user" action="#" method="post">

    <div class="form-IFS_DataLocation">
        <button id="button1">Shop Order</button>
    <div>

    <div class="form-PDF_Location">
        <button id="button2">PDF Drawings</button>
    <div>

    <div class="form-Output_Location">
        <button id="button3">Output</button>
    <div>

    <div class="form-Highlight">
        <button id="button4">Execute</button>
    <div>

    </form>

    <script src="./test.js"></script>
</body>
</html>

在高亮按钮 (ID: button4) 代码的 css 部分，更改 margin-top 属性没有任何效果。据我了解，它应该将按钮 10px 移至上方按钮下方。

最佳答案

让我们一步一步来。

html 无效。您必须关闭 html 中的所有标签(您可以在 google 上找到一些异常(exception))。 div 和 center 没有关闭。如果您使用像 webstorm 或 eclipse 或...(很多很多...)这样的 IDE，它们会内在地显示您的错误。将 html 中的 DIV 视为包装器，或将其中的任何内容都封装起来的框:

    <!-- close the center tag: -->
    <h1><center>Test</center></h1>

    <!-- here! close the div tag: -->
    <div class="form-IFS_DataLocation">
        <button id="button1">Shop Order</button>
    </div>

    <!-- Just the same for rest of div blocks... -->

你让你的生活变得比需要的更艰难。在编写 CSS 时，您不应该单独为 html 中的每个元素设置样式。相反，在 CSS 中你会说:我希望我所有的按钮都是 cornflowerblue，文本大小为 .7 rem 然后，在 HTML 中，你只需标记那些应该表现得像按钮的元素。您的愿望将适用于他们:

/* state your wish, and name your wish such as .btn */
.btn { background-color: cornflowerblue;  font-size: .7 rem; }

/* another wish, about danger elemets */
.danger { color: red; }

在 html 中:

<!-- which wishes to apply here? you can combine -->
<!-- this is both "button" and "dangerous" -->
<div class="btn danger">BURN THE KITTENS</div>

<!-- this is just a "button" -->
<div class="btn">Feed the kittens</div>

除非必要，否则不要在 css 中使用 absolute。在这种情况下不是!我相信你希望你的按钮在屏幕的左侧。想想不同的屏幕尺寸、手机屏幕、电视、打印在纸上的事件页面。绝对会让你的生活变得 hell 。您还可以看到边距不适用于绝对元素。如果您希望按钮始终位于屏幕左侧，请固定其父 div。
有时将相关的东西(如按钮)堆叠在一起(将它们包装在一个 div 中)是个好主意。但不要过度。

最后:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Working with HTML Forms</title>
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <h1>
    <center>Test</center>
  </h1>

  <form id="form-user" action="#" method="post">
    <div class="app-buttons">
      <div class="form-IFS_DataLocation form-element">
        <button id="button1">Shop Order</button>
      </div>

      <div class="form-PDF_Location form-element">
        <button id="button2">PDF Drawings</button>
      </div>

      <div class="form-Output_Location form-element">
        <button id="button3">Output</button>
      </div>

      <div class="form-Highlight form-element">
        <button id="button4">Execute</button>
      </div>
    </div>
  </form>

  <script src="./test.js"></script>
</body>

</html>

并且:

html { font: normal 14px/1.5 Courier New; }
h1 {  margin: 7rem;  margin-top: 8rem; }
form {  margin: 3rem;  width: 800px; }

/* Style all the buttons in one go */
button {
  font-size: 0.7rem;
  border: none;
  padding: 0.5rem 0.5rem;
  color: white;
  background-color: cornflowerblue;
  cursor: pointer;
  min-width: 100px;
}

.form-element {
  font-size: 1rem;
  width: 200px;
  margin-top: 10px;  
}

在此处运行示例:https://codepen.io/hkoosha/pen/XWWYvxd

最后说明:您正在将 button 包装在另一个 div 中，类为 form-IFS_...。这可能是不必要的，您可以只使用 button 元素。你的里程可能会有所不同。

关于html - 按钮位置不变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58785909/

html - 按钮位置不变

上一篇：php - 如何在 MySQL 语句中包含 PHP 变量

下一篇：css - 如何使 webkit-scrollbar 只在一个 div 上可见？