如何将表格横向排列并防止遮挡下标和按钮？-html教程-PHP中文网

如何将表格横向排列并防止遮挡下标和按钮？

霞舞

发布： 2024-11-03 13:15:47

原创

648人浏览过

如何将表格横向排列并防止遮挡下标和按钮？

如何让表格横向排列：

在 HTML 中，float: right 属性用于将元素向右浮动。在此代码中，我们使用 float: right 将表格向右移动。

如何防止新生成的表格遮挡下标“∨”和“确定”按钮

在样式表中，为新生成的表格添加 float: right 样式。
调整下标“∨”和“确定”按钮的位置，将其放在表格上方，使用 position: absolute 属性。

如何防止点击“向下还原”后下标“∨”位置改变

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

使用 position: absolute 属性将下标“∨”固定在特定位置，这样不管是否点击“向下还原”，它的位置都不会改变。

修改后的代码

<html>
<head>
  <meta charset="utf-8">
  <title>Daily report generator</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    .box {
      float: right;
      margin-right: -840px; /* 调整为负值以向右移动表格 */
      margin-top: 200px;
      width: 10px;
      position: absolute; /* 新建表格浮动向右 */
    }

    .title {
      background: linear-gradient(#141e30);
    }

    table {
      height: 200px;
      width: 200px;
      font-size: 12px;
      text-align: center;
      float: right;
      margin: 10px;
      font-family: arial;
    }
    
    /* 其他样式保持不变 */
    
  </style>
</head>
<body>
  <div class="loginBox">
    <h2>Generator</h2>
    <form action="">
      <div class="item">
        <input type="text" required>
        <label for="" style="font-size: 16px; color: #03e9f4;">Data</label>
      </div>
      <div class="item">
        <input type="password" required>
        <label for=""style="font-size: 16px; color: #03e9f4;">Date</label>
      </div>
      <button class="btn" style="background: transparent; border: 0;outline: none;">generate
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </button>
    </form>
  </div>
  
  <div class="add_sty" style="position: absolute; top: 30px; left: 398px;">∨</div>
  <div class="button_sty" style="position: absolute; top: 30px; left: 420px;">确定</div>

  <script src="jquery-3.6.3.min.js"></script>
  <script>
    // 其他代码保持不变
  </script>
</body>
</html>

登录后复制

以上就是如何将表格横向排列并防止遮挡下标和按钮？的详细内容，更多请关注php中文网其它相关文章！