时间戳

首页 > 解决方案 > 按钮位置不变

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下方。

标签： htmlcss

解决方案

让我们一步一步来。

  1. html 无效。您必须关闭 html 中的所有标签（您可以在 google 上找到一些例外）。divand没有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... -->
  1. 你让你的生活变得比它需要的更艰难。编写 CSS 时，不应单独设置 html 中的每个元素的样式。相反，在 CSS 中，您会说：I want all my buttons to be cornflowerblue, with text size of .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>

  1. 除非必要，否则不要absolute在 css 中使用。在这种情况下不是！我相信您希望您的按钮位于屏幕左侧。想想不同的屏幕尺寸、移动屏幕、电视、打印在纸上的活动页面。绝对会让你的生活变得地狱。您还可以看到边距不适用于绝对元素。如果您希望您的按钮始终位于屏幕左侧，请固定其父 div。

  2. 有时将相关的东西（如按钮）堆叠在一起（将它们包装在一个 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

最后一点：你正在用 class包装你button的另一个。这可能是不必要的，您可以仅使用该元素。不过，您的里程可能会有所不同。divform-IFS_...button

推荐阅读